直接用Performance面板诊断CSS动画掉帧：需用快捷键启动录制以捕获合成器信息，关注FPS轨道连续两帧低于50fps即卡顿，结合Animation Frame Fired中Self Time超10ms定位JS同步操作，并通过chrome://gpu验证硬件加速是否启用。
直接用 Performance 面板看 CSS 动画是否掉帧，关键不在“录不录”，而在“怎么录、看哪里、怎么判”。重点是捕获合成器信息、盯住 FPS 轨道和 Animation Frame Fired 事件，再结合主线程耗时定位瓶颈。
录制前必须做的三件事
默认点左上角●开始录制，不会捕获合成器层数据，动画分析基本无效。正确做法是：
- 按 Ctrl+Shift+P（Win）或 Cmd+Shift+P（Mac），输入 Record，选中并回车——这个命令会自动启用合成器追踪
- 确保动画完整循环：比如一个 1.5s 的旋转动画，至少录制 2.5s；中间不要切标签页，避免系统休眠导致采样中断
- 打开 chrome://flags → 搜索 paint → 启用 Enable advanced paint instrumentation（需先在 Settings → Experiments 开启实验功能）
重点关注 FPS 和 Frames 轨道
顶部 Overview 区的 FPS 曲线不是参考值，是诊断依据：
- 绿色横线代表 60 FPS 基准；出现 连续两帧低于 50 FPS（红色竖条），肉眼就能感知卡顿
- 别只看峰值——滚动鼠标到 FPS 轨道下方的 Frames 子轨道，每个小方块代表一帧渲染结果，黄色表示正常，红色表示丢帧
- 若某段动画全程红条密集，说明合成器没跟上节奏，大概率是属性不可加速或图层未提升
查 Animation Frame Fired 定位 JS 干扰
在 Main 火焰图下方找到 Animation Frame Fired 事件，这是浏览器承诺执行一帧的信号：
- 悬停在黄色事件块上，看 Summary 里的 Self Time：超过 10ms 就危险，说明 JS 同步操作阻塞了帧生成
- 常见诱因：在 rAF 回调里读取
offsetHeight、getBoundingClientRect()后立刻修改样式，触发强制同步布局 - 点击该事件，再切换到 Bottom-Up 标签，按 Self Time 降序排列，一眼看出哪段 JS 函数耗时最长
验证硬件加速是否生效
再流畅的 transform 动画，如果没走 GPU，照样卡：
- 访问 chrome://gpu，确认 Graphics Feature Status 中 Compositing 和 Rasterization 显示 Hardware accelerated
- 在 Elements 面板选中动画元素，右侧 Styles 标签里检查是否出现 rendered as a layer 提示；没有的话，加
will-change: transform或transform: translateZ(0)强制提升图层 - 注意副作用：滥用 will-change 会增加内存开销，仅对真正高频动画的元素使用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
