用Chrome DevTools诊断CSS动画掉帧：打开Performance面板，用快捷键启动录制（非左上按钮），确保捕获合成器信息、录制完整动画周期、启用高级绘制工具；关注FPS轨道红色竖条（连续两帧＜50fps即可能卡顿）；优先使用transform/opacity等可合成属性，避免触发重排重绘；检查chrome://gpu确认硬件加速启用；Animation Frame Fired中“Dropped frame”表示实际渲染超时，需结合Self Time定位JS同步操作瓶颈。
怎么用Chrome DevTools看CSS动画是否掉帧
直接打开 Performance 面板，按 Ctrl+Shift+P（Win）或 Cmd+Shift+P（Mac），输入 Record，选中 Record 并回车——别点左上角的录制按钮，那个默认不捕获合成器层信息。
常见错误是只录几秒就停，结果看不到动画完整周期；建议至少录制一个完整动画循环（比如 2s 动画，录 3s），并确保页面处于活跃标签页、未被系统休眠。
- 勾选
Enable advanced paint instrumentation（在设置 → Experiments 里先启用实验功能） - 播放动画前，清空缓存并禁用所有扩展，避免干扰渲染时间线
- 重点关注
Frames per second轨道里的红色竖条——那是低于 60fps 的帧，不是“偶尔红一下”才危险，连续两帧低于 50fps 就可能被肉眼察觉卡顿
为什么 transform 和 opacity 动画更稳
Chrome 把这两类属性标记为“可合成”，意味着它们能走 compositor thread，不触发重排（layout）和重绘（paint）。一旦你给 left、top 或 background-color 加 transition，主线程就得每帧计算样式+布局+绘制，CPU 压力陡增。
实操时注意：即使写了 transform: translateX(10px)，如果父元素有 will-change: transform 但子元素又触发了 box-shadow 变化，照样会强制重绘。不是加了 transform 就万事大吉。
立即学习“前端免费学习笔记（深入）”；
-
transform动画必须用px、%、vw等可插值单位，em或rem在某些旧版 Chrome 里会退回到主线程计算 -
opacity: 0 → 1安全，但opacity: 0.3 → 0.7如果叠加了filter: blur(2px)，依然会触发光栅化（raster）瓶颈 - 用
chrome://gpu确认当前页面是否启用了硬件加速；若显示Software only，再好的 CSS 也白搭
Animation Frame Fired 日志里频繁出现“Dropped frame”说明什么
这不是警告，是事实陈述——DevTools 在告诉你：浏览器承诺每 16.6ms 执行一帧，但某次回调实际花了 28ms，这帧就被丢弃了。关键不在“有没有丢”，而在“为什么丢”。
打开 Performance 面板后，把鼠标悬停在黄色的 Animation Frame Fired 事件上，看下方 Summary 里的 Self Time。如果超过 10ms，大概率是 JavaScript 在里面做了同步 DOM 操作，比如读取 offsetHeight 后立刻改 style.left。
- 避免在
requestAnimationFrame回调里调用getComputedStyle、offsetTop、clientWidth——这些会强制同步触发布局 - 用
performance.now()测量动画逻辑耗时，别信控制台里console.time()的精度，它不包含排队延迟 - 如果动画由
@keyframes驱动，但 Timeline 里看不到对应Animation条目，说明该动画被 CSSOM 优化掉了（比如初始和结束状态相同），此时不会产生帧
哪些 CSS 属性改动必然触发重排
只要改了影响几何尺寸或流式布局的属性，浏览器就必须重新计算所有相关元素的位置和大小。这类操作无法被合成器绕过，是性能杀手。
典型例子：width、height、padding、margin、border、display、position、top、left……哪怕只是把 display: none 切成 block，也会让整个子树失效。
- 用
transform: scale(1)替代width/height缩放，视觉一致但不重排 -
visibility: hidden不触发重排，display: none会——前者保留空间，后者彻底移除文档流 - 批量修改样式时，优先用
element.style.cssText = "transform: ...; opacity: ..."，比逐个赋值style.transform、style.opacity更少触发样式计算
