3、性能分析工具：Chrome DevTools Performance 面板实战、FPS 计数器、Layers 面板

做动画掉帧修复，最怕什么？

怕「我觉得卡，但不知道卡在哪」。

我见过太多同学，凭肉眼判断动画流畅度。结果呢？明明 55fps 的动画，非说卡成 PPT。或者反过来，掉到 20fps 了，还觉得「还行啊」。

这一章，我们就来搞定三把手术刀：Performance 面板、FPS 计数器、Layers 面板。用数据说话，而不是靠感觉。

3.1 Performance 面板：动画性能的「黑匣子」

Performance 面板，说白了就是浏览器的飞行记录仪。它能记录每一帧里，浏览器到底在忙什么。

3.1.1 录制一段动画性能数据

操作很简单，但我建议你养成固定习惯：

1. 打开 Chrome DevTools（F12）
2. 切换到 Performance 面板
3. 点击左上角录制按钮（或按 Ctrl+E）
4. 触发你的动画
5. 点击停止

3.1.2 读懂火焰图

录制完成后，你会看到一堆花花绿绿的条条。别慌，我们只看三个关键区域：

区域	颜色	代表什么
FPS 行	绿色/红色	帧率。绿色健康，红色就是掉帧
Main 线程	黄色/紫色/绿色	JavaScript 执行、样式计算、布局
GPU 行	绿色	合成与光栅化

嗯，这里要注意：红色条出现的地方，就是掉帧的元凶。点开它，看下面的 Call Tree，哪个函数耗时最长，一目了然。

3.1.3 实战：定位一个「长任务」

我在项目中遇到过这样一个案例：一个滚动动画，每到特定位置就卡一下。

录制 Performance 数据后，发现 Main 线程上有一个紫色的长条，长达 120ms。点开一看，是 scrollHandler 函数里调用了 getBoundingClientRect()，触发了强制回流。

// 问题代码
function scrollHandler() {
  const rect = element.getBoundingClientRect(); // 强制回流！
  // ... 其他逻辑
}

// 修复后
let cachedRect = null;
function scrollHandler() {
  if (!cachedRect) {
    cachedRect = element.getBoundingClientRect();
  }
  // ... 使用缓存值
}

3.2 FPS 计数器：实时帧率监控

Performance 面板适合「事后分析」。但如果你需要实时监控帧率呢？

用 FPS 计数器。

3.2.1 开启 FPS 计数器

1. 打开 DevTools
2. 按 Ctrl+Shift+P 打开命令菜单
3. 输入 Show frames per second (FPS) meter
4. 回车

右上角会出现一个实时浮窗，显示当前帧率、GPU 内存使用情况。

3.2.2 读懂 FPS 数据

数值	含义	怎么办
60fps	完美	别动，保持住
30-59fps	轻微掉帧	检查是否有长任务
低于 30fps	严重卡顿	立刻停止，用 Performance 定位

3.3 Layers 面板：合成层的秘密

你想想看，为什么有些动画用 transform 和 opacity 就流畅，用 left 和 top 就卡？

答案在合成层（Compositor Layers）里。

3.3.1 开启 Layers 面板

DevTools 更多工具 → Layers。或者直接在命令菜单里搜 Show Layers。

打开后，你会看到页面被拆成了很多层。每一层都是一个独立的「画布」。浏览器会把这些层合成到一起，显示在屏幕上。

3.3.2 识别「不必要的层」

层越多越好吗？不是。

每多一层，浏览器就要多一次合成操作。层太多，反而会拖慢性能。

我见过一个项目，一个简单的弹窗动画，居然生成了 20 多层。原因是每个子元素都用了 will-change: transform。

// 错误示范：每个子元素都提升为层
<div class="modal">
  <div style="will-change: transform">...</div>
  <div style="will-change: transform">...</div>
  <div style="will-change: transform">...</div>
</div>

// 正确做法：只提升父容器
<div class="modal" style="will-change: transform">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

3.4 三把手术刀的使用场景

这三个工具，什么时候用哪个？

场景	推荐工具	原因
实时监控帧率	FPS 计数器	轻量、实时、不干扰
定位掉帧原因	Performance 面板	能看到函数级耗时
检查合成层	Layers 面板	直观看到层结构
综合性能分析	三者结合	先看 FPS，再录 Performance，最后查 Layers

3.5 本章知识体系

下面这张图，帮你理清三个工具的关系：

3.6 实战练习

光看不练，等于白学。我建议你立刻打开一个项目，做这三件事：

1. 开启 FPS 计数器，观察页面帧率
2. 找到一处掉帧，用 Performance 面板录制，定位耗时函数
3. 打开 Layers 面板，检查是否有不必要的合成层