JavaScript 动画优化：requestAnimationFrame 替代 setInterval

rAF比setInterval更优因其与屏幕刷新率同步，避免掉帧；2. 页面不可见时自动暂停，节省资源；3. 浏览器控制帧率对齐，减少卡顿；4. 提供高精度时间戳，提升动画精度。

在实现网页动画时，使用 setInterval 虽然简单直接，但存在性能问题和帧率不稳定的缺陷。现代 Web 开发推荐使用 requestAnimationFrame（简称 rAF）来替代 setInterval 实现更流畅、更高效的动画效果。

为什么 rAF 比 setInterval 更优？

rAF 是浏览器专为动画设计的 API，它与屏幕刷新率同步，通常每秒执行 60 次（即 16.7ms/帧），能有效避免掉帧或过度渲染。

• 自动节流：当页面不可见（如切换标签页）时，rAF 会暂停执行，节省 CPU 和电池资源。
• 帧率对齐：浏览器决定何时绘制下一帧，确保动画与刷新率一致，减少卡顿和闪烁。
• 更高精度计时：rAF 回调函数接收一个高精度时间戳参数，比 Date.now() 或 performance.now() 更准确。

如何用 rAF 替代 setInterval？

将原本基于定时器的循环改为递归调用 rAF，控制动画生命周期。

上面的例子让元素在 2 秒内平滑移动 200px，利用时间差计算进度，避免依赖固定间隔。

万兴爱画

万兴爱画AI绘画生成工具

52

查看详情

立即学习“Java免费学习笔记（深入）”；

注意事项与最佳实践

为了发挥 rAF 的最大优势，需注意以下几点：

• 不要嵌套 setTimeout/setInterval：混合使用会导致帧节奏混乱，失去同步优势。
• 及时终止动画：在组件销毁或用户交互中断时，通过不再调用 rAF 终止循环。
• 结合 CSS 动画做取舍：简单变换建议用 CSS transition 或 @keyframes，复杂逻辑再用 JS 控制。
• 避免长时间运行任务：JS 执行时间过长仍会造成卡顿，必要时可分片处理。

基本上就这些。用 requestAnimationFrame 替代 setInterval 不仅提升动画质量，也更符合现代浏览器的渲染机制。掌握这个模式，是写出高性能前端动画的关键一步。

以上就是JavaScript 动画优化：requestAnimationFrame 替代 setInterval的详细内容，更多请关注php中文网其它相关文章！