Chrome DevTools Performance 是优化前端性能的瑞士军刀

Chrome DevTools Performance 面板 是前端性能优化的"显微镜"，它能帮你找出 JS 卡顿的根因。下面我会分 WHAT（是什么）、WHY（为什么要用）、HOW（怎么用） 三个角度，详细讲如何借助它来提高 JavaScript 性能。

Chrome DevTools Performance 面板是什么

横向 = 时间，越宽表示耗时越长。
纵向 = 调用栈，从下到上是函数调用关系。
颜色含义：
- 💛 黄色（Scripting）：JS 执行。
- 💜 紫色（Rendering）：样式计算、布局。
- 💚 绿色（Painting）：绘制。
找 宽的黄色块（长函数），说明 JS 逻辑耗时。
找 频繁的紫色/绿色块，说明频繁布局/绘制。

示例：

如果看到 updateUI() 占用 50ms，说明它太慢 → 需要优化算法/减少 DOM 操作。

长时间的 JS 调用
- 解决方法：优化算法（例如用 Map 替代数组查找），或拆分任务（用 requestAnimationFrame 或 Web Worker）。
频繁 Recalculate Style / Layout
- 常见原因：在循环里频繁 offsetWidth + 修改 DOM。
- 解决方法：读写分离、用 DocumentFragment、批量更新。
频繁 Paint / Composite
- 常见原因：频繁修改 left/top/width/height 或背景。
- 解决方法：优先使用 transform: translate / scale / opacity，让 GPU 合成层处理。
内存泄漏（在 Performance → Memory 中看 Timeline）
- 内存曲线不断上升且不下降 → 可能事件监听没清理。
- 解决方法：在组件销毁时 removeEventListener，或用 WeakMap/WeakSet 管理缓存。

JS 优化
- 使用 requestAnimationFrame 替代 setInterval。
- 大循环里避免重复计算 arr.length、DOM 查询。
- 避免 O(n²) 算法，必要时用缓存/Map/Set。
DOM 优化
- 批量 DOM 插入：用 DocumentFragment。
- 尽量减少回流：一次性改样式，用 className 替代逐条改。
- 只修改 GPU-friendly 属性（transform/opacity）。
事件优化
- 高频事件（scroll/resize/mousemove）用 rAF 节流。
- 不要在滚动里直接写 DOM。

✅ 总结一句话 ：

用 Chrome DevTools Performance 面板 找出耗时最长的 JS/布局/绘制步骤 → 优化算法 + 减少 DOM 改动 + 利用 GPU 属性 → 再次测量验证效果 。更多细节见 Chrome 官网：https://developer.chrome.com/docs/devtools/performance/reference?hl=zh-cn