面试:前端怎么进行性能优化

1.感知性能优化

对于用户来说，用户的感知性能才是最重要的，简单讲，就是让用户感觉你的网站访问很快，并且感知性能没有衡量标准。如果一个页面的加载时间很长，我们也可以通过一些方式让用户觉得没有那么慢。

1.1 loading

这个不多说，推荐给大家一个loading gif网址:https://www.sucaijishi.com/gif-11-57-1.html。

1.2 骨架屏

原理:
使用一张占位骨架图（svg / lottie / gif）来代替 loading 效果，当数据加载完成后替换掉骨架图。

实现方案:

• 原生实现
• 像React， Angular， Vue 使用的UI框架 ant-design，ng_zorro，Element ui 自带一些基础简单的骨架屏可以直接使用。

2.懒加载和预加载

这个不多说。可以上网查询一下。

3.合理使用缓存

• 采用HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头控制浏览器缓存
• 采用Service Worker离线缓存
• 前端合理利用localStorage

4.压缩资源体积

• 通过插件压缩文件
• gzip压缩
• 通过压缩算法压缩图片

5.打包工具构建优化

以webpack为例:

• 通过配置exclude&include属性、优化loader正则匹配来指定文件构建，避免不必要的文件被打包
• 对代码进行Code Splitting，遵循小即是块的原则；
• 合理选择source-map优化代码调试;
• 使用externals配置来提取常用库;
• 配置模块解析resolve
• 使用Tree Shaking防止冗余代码被打包;
• Hot update;
• 正确配置哈希;
• dll优化
• …

6.减少 HTTP 请求次数

• 雪碧图
• 合并文件

7.服务器端优化

虽然这是前端优化之外的一部分，但服务器性能对于页面加载至关重要：

• 使用内容分发网络（CDN）：将静态资源（如图片、CSS、JavaScript）存储在 CDN 上，以便更快速地提供内容，尤其是对全球用户。
• 启用 HTTP/2 或 HTTP/3：这些协议比 HTTP/1 更高效，支持并行请求、头压缩和其他优化，提高数据传输速度。
• SSR渲染

8.减少回流重绘

• 使用CSS动画代替JavaScript动画：
  CSS动画是利用浏览器的硬件加速，性能更高效。尽量使用transform和opacity属性进行动画效果，避免使用会触发回流的属性，如width和height。
• 批量修改样式：
  尽量避免频繁地修改元素的样式，可以将多个样式的修改集中到一次操作中，例如使用CSS的class进行批量修改。
• 使用文档碎片（Document Fragment）:
  当需要频繁地操作DOM时，可以使用文档碎片来进行缓存，然后再一次性地将文档碎片添加到DOM树中，减少回流次数。
• 避免强制同步布局：
  在读取布局相关的属性（如offsetTop、offsetLeft、clientWidth等）之前，先将其缓存起来，避免多次读取导致浏览器强制进行同步布局。
• 使用transform和position属性：
  尽量使用transform属性进行元素的平移、旋转、缩放等操作，使用position属性进行定位，避免引起回流的属性，如top、left、width、height等。
• 避免频繁改变窗口大小：
  改变窗口大小会触发回流，所以尽量避免频繁改变窗口大小。
• 使用节流和防抖技术：
  对于一些频繁触发的事件（如scroll、resize），可以使用节流和防抖技术来控制事件的触发频率，减少回流和重绘。
• 使用translateZ触发GPU加速：
  对于需要频繁变动的元素，例如动画元素，可以使用translateZ(0)触发GPU加速，减少回流和重绘。

9.优化垃圾回收

• 避免全局变量
  全局变量在程序的整个生命周期中都不会被回收，因此尽量避免使用全局变量，或在不再需要时将其设置为 null。
• 合理使用闭包
  虽然闭包是 JavaScript 中强大的功能，但应避免不必要地持有对外部变量的引用，以减少内存泄漏的风险。
• 使用弱引用
  JavaScript 提供了 WeakMap 和 WeakSet，它们不会阻止垃圾回收。使用这些数据结构可以减少内存泄漏的可能性。
• 手动清除事件监听
• 手动清除定时器、计时器
• 手动调用垃圾回收
  一般情况下我们无需手动调用垃圾回收，但有些浏览器支持主动触发垃圾回收。

  //IE 浏览器
  if (typeof window.CollectGarbage === "function") {
    window.CollectGarbage()
  }
  //Opera 浏览器
  if (window.opera && typeof window.opera.collect === "function") {
   window.opera.collect()
  }
  

10.其它

• 响应式布局
  使用响应式布局可以使页面适应不同大小的设备屏幕，提高用户体验，避免出现滚动条等不必要的元素。
• SEO优化
• 节流防抖