CSS 动画和 JS 动画哪个性能更好？

CSS 动画通常比 JavaScript 动画性能更好，尤其在简单动画场景下。以下是关键对比：

1. 性能机制
   • CSS 动画利用浏览器的 GPU 加速 合成层渲染，直接通过渲染引擎处理属性变化（如 transform、opacity），避免主线程阻塞。
   • JavaScript 动画依赖主线程执行代码（例如 setInterval 或手动控制帧），可能因脚本计算、布局重排（reflow）导致阻塞和丢帧。
2. 流畅度表现
   • CSS 动画帧率通常稳定在 60fps（浏览器优化），尤其在低端设备更流畅。
   • JavaScript 动画由于主线程压力，帧率可能降至 30fps 以下，易出现卡顿。
3. 优化建议
   • 简单动画（位移、缩放、渐变）：优先用 CSS 动画，性能更优且代码简洁。
   • 复杂动画（精准控制时序、交互反馈）：结合 JavaScript 与 requestAnimationFrame 减少主线程阻塞。
4. 性能差异原因
   CSS 动画避开 JavaScript 解析和主线程计算，直接由浏览器合成层处理；JavaScript 动画需额外的 JS 解析与主线程协调。

结论：在纯性能角度，CSS 动画更适合高频或资源敏感的场景，而 JavaScript 动画需谨慎优化以接近 CSS 性能。