优先用 requestAnimationFrame 实现平滑动画，它匹配屏幕刷新率、后台暂停省资源；简单视觉变化用 CSS transition 或 @keyframes；复杂动态控制用 Web Animations API；避免触发重排，只用 transform、opacity、filter 等高效属性。
用 requestAnimationFrame 做平滑动画，别用 setTimeout 或 setInterval
浏览器对 requestAnimationFrame 有专门优化，能自动匹配屏幕刷新率（通常是 60fps），而 setTimeout 的执行时机不可控，容易掉帧或卡顿。尤其在页面后台运行时，setTimeout 仍会执行，但 requestAnimationFrame 会暂停，更省资源。
常见错误是手动写死 16ms 间隔：setTimeout(fn, 16) —— 这不等于 60fps，因为 JS 执行、重排、重绘都耗时，实际帧率可能只有 40fps 甚至更低。
正确做法是递归调用：
function animate() {
// 更新状态，比如 element.style.transform = `translateX(${x}px)`
// 触发重排/重绘
requestAnimationFrame(animate)
}
requestAnimationFrame(animate)
CSS 动画和过渡更适合简单视觉变化
如果只是位移、缩放、透明度、颜色这类属性变化，优先用 transition 或 @keyframes。它们由浏览器合成线程处理，不阻塞主线程，性能远超 JS 操作样式。
立即学习“Java免费学习笔记（深入）”；
注意几个易错点：
-
transition只在属性值“变化时触发”，比如从opacity: 0到opacity: 1；但如果用 JS 快速连续设多次style.opacity，可能只触发最后一次过渡 -
transform和opacity是仅有的两个能触发硬件加速的 CSS 属性（在多数浏览器中），其他如left、top会引发频繁重排，卡顿明显 - 用
will-change: transform提前提示浏览器要动画，但别滥用——它会提前分配图层内存，过度使用反而降低性能
Web Animations API（element.animate()）适合动态控制
当需要运行时生成动画、暂停/回放/调节速度，或者组合多个属性动画时，element.animate() 比纯 CSS 更灵活，也比手写 requestAnimationFrame 简洁。
它返回一个 Animation 对象，可直接调用 .pause()、.play()、.reverse()、.currentTime 等方法。
示例：让元素左右晃动三次
const anim = element.animate(
[
{ transform: 'translateX(0)' },
{ transform: 'translateX(-10px)' },
{ transform: 'translateX(0)' },
{ transform: 'translateX(10px)' },
{ transform: 'translateX(0)' }
],
{
duration: 600,
iterations: 3
}
)
兼容性注意：IE 完全不支持，Safari 16.4+ 才支持 iterationStart 等高级参数，生产环境建议加降级（比如 fallback 到 requestAnimationFrame）。
动画卡顿？先查是否触发了 Layout（重排）
真正拖慢动画的往往不是“动”，而是“动的时候浏览器被迫重新计算布局”。比如读取 offsetTop、getBoundingClientRect() 后立刻改样式，就会强制同步触发布局计算。
排查方式：
- Chrome DevTools → Rendering → 勾选 “Layout Shift Regions” 和 “FPS Meter”
- 在 Performance 面板录制动画过程，看 Flame Chart 中是否有大量绿色（Layout）块
- 避免在动画帧内读写交替：把所有读操作集中到开头，所有写操作集中到结尾
最稳妥的动画属性只有三个：transform、opacity、filter（部分浏览器支持）。其他都尽量避免。
