性能优化

参考：
https://juejin.cn/post/6981673766178783262
https://juejin.cn/post/6892994632968306702
https://juejin.cn/post/7326268947069534234

从优化目标、优化策略两个方面来考虑，还可以了解一下六大指标。

优化目标

层面	目标
加载性能	目标（时间层面）：LCP ≤2.5s（首屏内容渲染）、FCP ≤1.8s（首次内容绘制） 策略：资源压缩、CDN 分发、预加载关键资源
交互体验	目标（时间层面）：FID ≤100ms（输入响应）、CLS ≤0.1（布局稳定性） 策略：拆分长任务、避免强制同步布局、使用 will-change 触发 GPU 加速
资源效率	目标（体积层面）：JS <200KB（首屏）、CSS <100KB、图片体积减少 25%-50% 策略：Tree Shaking、图片转 WebP/AVIF、字体子集化

优化策略

网络传输

• 构建策略

  • 合并小文件，减少 HTTP 请求
  • 使用 GZIP 压缩静态文件（HTML/CSS/JS/图片）
  • JS Tree Shaking
  • CSS Tree Shaking
  • 使用 Code Splitting 将大 chunk 拆分成多个小 chunk
  • 按需加载（懒加载）

• 图片优化/图像策略

  • 用 CSS 代替图片
  • 图片延迟加载
  • 响应式图片
  • 调整图片大小
  • 降低图片质量
  • 使用 webp 格式

• 请求策略

  • 减少 Cookie 传输
  • 使用 HTTP2

• 分发策略

  • 静态资源使用 CDN

• 缓存策略

  • 使用 HTTP 缓存

• 字体优化

页面解析渲染

• DOM 策略

  • 尽量减少 DOM 数量
  • 缓存 DOM 计算属性
  • 避免过多 DOM 操作
  • 使用 DOMFragment 缓存批量化 DOM 操作

• CSS 策略

  • 尽量降低 CSS 选择器复杂度
  • 尽量用link少用@import
  • 尽量用 CSS 实现动画
  • GPU 加速（使用transform和opacity实现动画）

• 阻塞策略

  • 使用骨架屏
  • 静态生成首屏文件
  • 尽量减少 JS 操作 DOM 和 CSSOM
  • CSS 文件放在头部，JS 文件放在底部或使用 defer/async

• 回流重绘策略

  • 减少使用会导致回流的属性和方法
  • 减少使用会导致重绘的属性和方法

运行时性能

• JavaScript 执行性能

  • 事件节流/防抖
  • 启用事件委托
  • 尽量使用原生方法，执行效率高

• 内存管理

  • 及时清理定时器和事件监听
  • 避免内存泄漏（闭包/DOM 引用未释放）

• 使用 Web Worker

  • 耗时计算放到 Worker 中，避免阻塞 UI

• React（见对应下的分类）

• Vue（见对应下的分类）