干货 前端性能优化列表

前端性能优化的目的：让页面更快响应用户的请求，展现内容

1. 页面加载过程中，关于 css，js，媒体资源(生产到传输)：

   1. 代码拆分(只加载当前页面需要的内容)
   2. 减少请求(减少 Http 连接建立的耗时)
   3. 使用 CDN 减少网络延迟
   4. 网络协议选择 Http2.0，TLS 1.3 减少握手时间，
   5. 利用缓存：减少请求，更快响应
   6. 媒体资源压缩：包括音视频和图片，需要进行一定程度的压缩，减少流量消耗，也能更快响应用户
   7. 预加载内容：link rel="prefetch/preload"，提前加载，快速响应

2. 页面运行过程中：

   1. 媒体资源延迟加载：只在其在需要在页面展示时才显示，减少内存占用
   2. 页面渲染减少 DOM 节点：比如对于长列表使用虚拟列表，减少内存占用
   3. debounce 和 throttle 减少前端计算，减轻服务器压力
   4. memorized：空间换时间，代价是更多内存消耗，可以减少前端计算，
   5. 避免对元素的尺寸和位置频繁修改，减少浏览器重排重绘
   6. 合理使用合成层，利用计算机的硬件加速(GPU) 实现更快和更流畅的动画效果
   7. 使用 web worker 处理计算耗时的任务，避免阻塞主线层
   8. 使用 WebAssembly， 获得更快的运算速度
   9. 请求数据缓存：对于相对稳定的数据或者有一定有效时间的数据，可以在从服务器请求后缓存到本地，短时间内再次获取时直接用缓存，减少请求
   10. 异常监控处理：捕获并处理 JavaScript 的错误和异常，避免页面崩溃或出现异常情况。

总结：

1. 减少内存

   1. 媒体资源延迟加载：只在其在需要在页面展示时才显示，减少内存占用
   2. 页面渲染减少 DOM 节点：比如对于长列表使用虚拟列表，减少内存占用

2. 减少计算或者加速计算：

   1. debounce 和 throttle 减少前端计算，减轻服务器压力
   2. memorized：空间换时间，代价是更多内存消耗，可以减少前端计算，
   3. 使用 web worker 处理计算耗时的任务，避免阻塞主线层
   4. 使用 WebAssembly， 获得更快的运算速度

3. 浏览器减少计算或者加速计算

   1. 避免对元素的尺寸和位置频繁修改，减少浏览器重排重绘
   2. 合理使用合成层，利用计算机的硬件加速(GPU) 实现更快和更流畅的动画效果

4. 其它：

   1. 请求数据缓存：对于相对稳定的数据或者有一定有效时间的数据，可以在从服务器请求后缓存到本地，短时间内再次获取时直接用缓存，减少请求
   2. 异常监控处理：捕获并处理 JavaScript 的错误和异常，避免页面崩溃或出现异常情况。