2、性能测量工具：Chrome DevTools Performance面板使用、FPS Meter、Layers面板、Rendering标签页
做动画优化，最怕什么？
怕「我觉得卡，但不知道卡在哪」。
我刚开始搞前端动画那会儿，全靠肉眼判断——「嗯，好像有点掉帧」。结果改了半天，该卡的还是卡。后来我才明白，感觉不靠谱，数据才靠谱。
这一章，我就带你把这几个 Chrome DevTools 里的硬核工具摸透。它们是你诊断动画性能的「听诊器」和「CT机」。
核心观点： 别猜，要测。用工具定位瓶颈，比凭经验瞎改有效十倍。
2.1 Performance 面板：你的时间线侦探
这个面板是我用得最多的工具，没有之一。它就像一个黑匣子，把你页面每一帧发生了什么，记得清清楚楚。
怎么用？
- 打开 DevTools → 点「Performance」标签。
- 点击左上角那个灰色的圆点（录制按钮）。
- 在你的页面上操作——比如滚动、点击、触发动画。
- 再点一下停止录制。
你会看到一条密密麻麻的时间线。别慌，我教你抓重点。
关键看什么？
- FPS 行（帧率条）：绿色越高越好，红色越密集越糟糕。如果红色条连成一片，说明你的动画在「挣扎」。
- Main 行（主线程）：这里记录了所有 JavaScript 执行、样式计算、布局、绘制。长条形的任务（超过 50ms）就是「长任务」，它们是卡顿的元凶。
- Summary 面板（底部）：点击时间线上的任意一段，底部会显示这段时间里 CPU 在忙什么——是 Scripting（脚本）、Rendering（渲染）还是 Painting（绘制）。
我的小技巧： 录制时只做 3-5 秒的操作就够了。录太久数据太多，反而不好分析。我习惯先录一次「正常状态」，再录一次「动画触发状态」，对比着看。
实战案例
有一次，我做一个弹窗动画，感觉有点卡。录了一看，Main 行里有个 120ms 的长任务，点开发现是一个 scroll 事件监听器里做了大量 DOM 操作。说白了，就是事件触发太频繁，主线程被堵死了。
解决办法？加个 requestAnimationFrame 节流，或者用 passive: true 选项。改完再录，长任务消失了，帧率从 30fps 回到了 60fps。
2.2 FPS Meter：实时帧率监视器
Performance 面板是「事后分析」，但有时候你需要 实时 看帧率变化。这时候 FPS Meter 就派上用场了。
怎么打开？
在 DevTools 里按 Ctrl+Shift+P（Mac 是 Cmd+Shift+P），输入「FPS」，选择「Show frames per second (FPS) meter」。
屏幕上会出现一个浮动的小窗口，显示当前帧率。它还会用颜色告诉你状态：
| 颜色 | 含义 | 我的建议 |
|---|---|---|
| 绿色 | 帧率稳定在 60fps 左右 | 恭喜，动画很流畅 |
| 黄色 | 帧率在 30-60fps 之间波动 | 有优化空间，建议排查 |
| 红色 | 帧率低于 30fps | 卡顿明显，必须优化 |
注意： FPS Meter 显示的是「浏览器渲染帧率」，不是「JavaScript 执行频率」。有时候 JS 跑得飞快，但浏览器来不及渲染，帧率照样低。我曾经就被这个误导过——以为 JS 快就万事大吉，结果渲染层拖了后腿。
2.3 Layers 面板：揭开合成层的神秘面纱
你想想看，浏览器是怎么把页面画出来的？它不是一口气全画完，而是把页面拆成一层一层的「合成层」，最后再拼在一起。
Layers 面板就是让你看这些层的。
怎么打开？
DevTools → 更多工具（三个点）→ Layers。或者直接按 Ctrl+Shift+P 搜「Layers」。
核心用法
- 查看层列表：左侧会列出所有合成层。每个层都有大小、内存占用。
- 检查层爆炸：如果层数太多（比如几十上百个），说明你的页面「层爆炸」了。这会导致 GPU 内存飙升，反而变卡。
- 确认 GPU 加速：选中一个层，右侧会显示它是否由 GPU 合成。动画元素如果不在独立层上，性能会大打折扣。
关键原则： 不是层越多越好。理想情况是「该有的层有，不该有的别乱加」。我见过有人给所有元素都加 will-change: transform，结果层数从 5 个变成 50 个，帧率直接腰斩。
什么时候该用？
当你发现动画卡顿，但 Performance 面板显示「绘制」时间很长时，就去 Layers 面板看看。如果动画元素不在独立层上，给它加个 will-change: transform 或 transform: translateZ(0) 强制提升。
2.4 Rendering 标签页：可视化渲染问题
这个标签页藏在 DevTools 的「更多工具」里。它有几个开关，能让你「看见」浏览器在背后干了什么。
Paint flashing（绘制闪烁）
打开这个开关后，每次浏览器执行绘制操作，屏幕上就会闪一下绿色。闪得越频繁，说明绘制越多。
我的经验： 如果动画运行时整个屏幕都在闪绿光，说明你的动画触发了大量重绘。这时候就该考虑用 transform 和 opacity 来替代 left、top、width 这些会触发布局的属性。
Layout Shift Regions（布局偏移区域）
这个功能用蓝色高亮显示「布局发生了偏移」的区域。布局偏移是导致页面「跳一下」的元凶，对用户体验伤害极大。
我曾经维护过一个电商页面，商品列表加载时总感觉「抖了一下」。打开 Layout Shift Regions 一看，原来是图片加载完成后，把下面的按钮挤下去了。解决办法就是给图片容器设置固定宽高比。
| 功能 | 颜色 | 含义 | 优化方向 |
|---|---|---|---|
| Paint flashing | 绿色闪烁 | 正在执行绘制 | 减少绘制区域和频率 |
| Layout Shift Regions | 蓝色高亮 | 发生了布局偏移 | 固定尺寸、避免布局抖动 |
| Layer borders | 橙色边框 | 显示合成层边界 | 检查层是否合理 |
| FPS meter | 浮动窗口 | 实时帧率 | 快速验证优化效果 |
2.5 我的工作流：四步诊断法
说了这么多工具，怎么组合着用？我分享一个自己的套路：
- 先开 FPS Meter：确认问题是否存在。帧率稳定在 55-60，基本不用管。如果掉到 30 以下，继续下一步。
- 录制 Performance：找到卡顿的时间段，看 Main 行里是什么任务在占用主线程。是 JS 太慢？还是布局/绘制太重？
- 打开 Rendering 标签页：如果发现绘制是瓶颈，打开 Paint flashing 看看哪些区域在重绘。如果有布局抖动，打开 Layout Shift Regions。
- 检查 Layers 面板：确认动画元素是否在独立合成层上。如果层数过多，考虑合并。
避坑指南： 我曾经一上来就开 Layers 面板，结果发现层数很多，就急着去合并。后来才发现，真正的问题是一个 setInterval 里做了 DOM 查询，导致主线程被频繁打断。所以，先看 Performance 定位问题，再用其他工具验证，顺序很重要。