HTML5动画卡顿主因是渲染路径错误而非性能不足；应使用requestAnimationFrame、CSS合成层及避免布局抖动来稳定60fps。
HTML5 动画卡顿，90% 不是性能不够，而是渲染路径没走对——用 requestAnimationFrame + CSS 合成层 + 避免布局抖动，就能稳住 60fps。
为什么 setTimeout 做动画一定掉帧
浏览器对 setTimeout 和 setInterval 的调度不与屏幕刷新同步，可能连续两次回调挤在同一个帧里，也可能跳过一帧。更糟的是，它们触发时若恰逢主线程忙（比如 JS 正在解析大数组），动画就会直接卡住。
- 永远用
requestAnimationFrame替代定时器驱动动画逻辑 - 确保每次回调只做「状态更新」+「样式设置」两件事，别在里面跑 DOM 查询或重排计算
- 如果必须做耗时计算（如路径插值），用
Web Worker拆出去，只把结果传回主线程
CSS 动画比 JS 动画更流畅的底层原因
现代浏览器对带 transform 和 opacity 的 CSS 动画会自动提升为合成层（compositing layer），由 GPU 直接处理，完全绕开主线程的样式计算、布局和绘制流程。
- 优先用
transform: translateX(10px)代替left: 10px；用opacity代替visibility或display - 避免在动画中读取
offsetTop、getBoundingClientRect()等触发强制同步布局（forced layout）的属性 - 需要频繁触发动画时，给元素加
will-change: transform（但别滥用，只在真正要动前加，动完移除）
Chrome DevTools 里一眼看出卡顿根源
打开 Performance 面板录制动画过程，重点关注三处：
立即学习“前端免费学习笔记（深入）”；
- 绿色长条（
Paint）太宽？说明在重绘大区域，检查是否意外触发了全屏重绘（比如改了body背景色） - 紫色块（
Layout）频繁出现？代表发生了强制同步布局，查 JS 是否读写了布局相关属性 - 灰色
Scripting占满整帧？说明 JS 执行太久，考虑拆分任务或用queueMicrotask让出主线程
特别注意：哪怕 FPS 显示 60，只要帧时间波动大（比如忽高忽低），用户也会感知卡顿——看的是帧持续时间（ms），不是平均帧率。
Canvas 动画掉帧？先关掉抗锯齿再查像素操作
canvas 默认开启抗锯齿（imageSmoothingEnabled = true），缩放或旋转时会大幅拖慢渲染；而逐像素操作（如 getImageData）更是主线程杀手。
- 静态图形或已知无缩放场景下，设
ctx.imageSmoothingEnabled = false - 避免每帧调用
getImageData/putImageData；改用离屏canvas预渲染 +drawImage复用 - 粒子多、图层杂时，按功能拆成多个
canvas（背景层、UI 层、特效层），各自独立更新
最易被忽略的一点：动画元素若含 filter（如 blur()、drop-shadow()），浏览器无法将其升为合成层，会退回到 CPU 渲染——这种卡顿不会报错，但性能曲线会突然塌陷。
