网页性能问题排查

1. 明确性能问题的表现

首先，明确问题的具体表现，例如：

• 页面加载速度慢
• 交互卡顿（如滚动、点击、动画不流畅）
• 内存泄漏（页面占用内存持续增长）
• 网络请求过多或过慢
• 首屏渲染时间过长

• 2. 使用浏览器开发者工具

现代浏览器（如 Chrome、Edge）自带的开发者工具是分析性能问题的首选工具。

2.1 Performance 面板

• 作用：记录页面运行时性能，分析 CPU、GPU、内存占用，定位卡顿和长任务。

• 步骤：

  1. 打开开发者工具（F12 或右键 -> 检查）。
  2. 切换到 Performance 面板。
  3. 点击“录制”按钮，操作页面（如滚动、点击）。
  4. 停止录制，分析结果。

• 重点关注：

  • Long Tasks：执行时间超过 50ms 的任务。
  • Main Thread：主线程的活动，查看是否有阻塞。
  • FPS：帧率是否低于 60fps。
  • Network：网络请求是否影响性能。

2.2 Lighthouse

• 作用：生成性能报告，提供优化建议。

• 步骤：

  1. 打开开发者工具。
  2. 切换到 Lighthouse 面板。
  3. 选择需要分析的类别（如 Performance、Accessibility）。
  4. 点击“Generate report”。

• 重点关注：

  • First Contentful Paint (FCP) ：首次内容渲染时间。
  • Largest Contentful Paint (LCP) ：最大内容渲染时间。
  • Time to Interactive (TTI) ：页面可交互时间。
  • Cumulative Layout Shift (CLS) ：累积布局偏移。

2.3 Network 面板

• 作用：分析网络请求，查看资源加载情况。

• 重点关注：

  • 请求数量是否过多。
  • 请求是否阻塞（如未压缩的资源、未使用 HTTP/2）。
  • 图片、字体等资源是否过大。
  • 是否有未使用的资源（通过 Coverage 面板查看）。

2.4 Memory 面板

• 作用：分析内存使用情况，排查内存泄漏。

• 步骤：

  1. 切换到 Memory 面板。
  2. 使用“Heap Snapshot”或“Allocation instrumentation on timeline”记录内存分配。
  3. 分析内存增长是否异常。

• 重点关注：

  • 是否有未释放的 DOM 节点或事件监听器。
  • 是否有循环引用。

---

3. 代码层面的优化

3.1 JavaScript 优化

• 减少主线程阻塞：

  • 使用 Web Workers 处理耗时任务。
  • 将长任务拆分为多个小任务（使用 setTimeout 或 requestIdleCallback）。

• 避免重复渲染：

  • 在 React 中使用 React.memo 或 useMemo。
  • 在 Vue 中使用 computed 或 watch 优化计算属性。

• 减少事件监听器：

  • 使用事件委托（Event Delegation）减少监听器数量。
  • 及时移除无用的事件监听器。

3.2 CSS 优化

• 减少重排和重绘：

  • 避免频繁修改样式（如 width、height、top、left）。
  • 使用 transform 和 opacity 实现动画（触发 GPU 加速）。

• 减少选择器复杂度：

  • 避免嵌套过深的选择器。
  • 使用 BEM 等命名规范。

• 避免布局抖动：

  • 批量读取和修改 DOM 属性。

3.3 HTML 优化

• 减少 DOM 数量：

  • 避免嵌套过深的 DOM 结构。
  • 使用虚拟列表（如 react-window 或 vue-virtual-scroller）优化长列表。

• 延迟加载非关键资源：

  • 使用 <link rel="preload"> 预加载关键资源。
  • 使用 <img loading="lazy"> 延迟加载图片。

---

4. 网络层面的优化

4.1 减少请求数量

• 合并 CSS 和 JS 文件。
• 使用雪碧图（CSS Sprites）合并小图标。
• 使用 HTTP/2 多路复用。

4.2 压缩资源

• 使用 Gzip 或 Brotli 压缩文本资源（如 HTML、CSS、JS）。
• 压缩图片（使用 WebP 格式，或工具如 imagemin）。

4.3 使用缓存

• 设置合理的缓存策略（如 Cache-Control、ETag）。
• 使用 Service Worker 实现离线缓存。

---

5. 工具推荐

5.1 性能分析工具

• WebPageTest：在线测试页面加载性能，生成瀑布图。
• PageSpeed Insights：Google 提供的性能分析工具。
• Sentry：监控前端错误和性能问题。

5.2 代码分析工具

• ESLint：检查 JavaScript/TypeScript 代码质量。
• Bundle Analyzer：分析打包体积，优化 Webpack 输出。

5.3 其他工具

• Chrome DevTools Protocol：通过脚本自动化性能分析。
• Perfume.js：用于监控前端性能指标。