17370845950

CSS动画更高效因硬件加速，但JS动画适用于交互控制与物理模拟；需用requestAnimationFrame、避开启重排、耗时计算及布局读取。

CSS 动画比 JS 动画更高效，但不是所有场景都适用

浏览器对 transform 和 opacity 的 CSS 动画做了硬件加速（走 GPU），而用 JS 修改 element.style.left 或 element.style.top 触发的是频繁的重排（reflow）+ 重绘（repaint），性能差很多。但如果你需要动态控制动画节奏、响应用户交互（比如拖拽中实时更新位置）、或做复杂物理模拟，JS 就不可替代。

用 requestAnimationFrame 写 JS 动画时必须避开这些坑

直接用 setTimeout 或 setInterval 控制动画帧率，容易掉帧、不同设备表现不一致。正确做法是用 requestAnimationFrame，它由浏览器统一调度，与屏幕刷新率同步（通常是 60fps）。

• 不要在回调里做耗时计算（如遍历大数组、深克隆对象），否则会卡顿
• 避免在动画帧内读取布局属性（如 offsetTop、getBoundingClientRect()），这会强制同步回流
• 用 transform: translateX() 替代修改 left，即使 JS 控制，也应操作 transform

let startTime = null;
const animate = (timestamp) => {
  if (!startTime) startTime = timestamp;
  const progress = Math.min((timestamp - startTime) / 1000, 1);
  element.style.transform = `translateX(${progress * 200}px)`;
  if (progress < 1) requestAnimationFrame(animate);
};
requestAnimationFrame(animate);

哪些 CSS 动画属性能触发硬件加速

只有少数 CSS 属性变更能走合成层（compositor layer），从而避免主线程重排。关键看是否触发 will-change 或隐式提升图层：

• ✅ 安全高效：transform（translate、scale、rotate）、opacity
• ⚠️ 慎用：top/left（触发重排）、width/height（重排）、box-shadow（重绘开销大）
• ? 小技巧：给元素加 transform: translateZ(0) 或 will-change: transform 可主动创建合成层，但别滥用，图层太多反而降低性能

JS 动画真正不可替代的三个场景

别为了“性能优先”硬套 CSS 动画，有些逻辑 JS 天然更可控：

• 需要根据鼠标移动实时插值（比如跟随光标、视差滚动）——CSS 无法监听 mousemove 并即时更新 keyframes
• 动画过程要中断、反向、暂停、跳转到某进度（animation-play-state 控制粒度太粗，且不支持动态时间轴）
• 涉及物理引擎（如弹簧效果 spring(250, 20)）或数据驱动动画（图表数值变化带动画过渡）——CSS keyframes 是静态的，无法响应运行时数据

这时候推荐用 Web Animations API（element.animate()）或轻量库如 anime.js，它们在 JS 控制力和性能之间做了平衡，部分实现也复用了 CSS 合成能力。

真正难的不是选 CSS 还是 JS，而是识别出哪段动画该进合成层、哪段必须保留在 JS 主线程做逻辑判断——边界常在 transform 和交互响应之间滑动。