【前端面试】requestAnimationFrame 的性能好在哪里?
最新回答
朕就是萌萌哒
2026-04-08 15:20:07
requestAnimationFrame（RAF）的性能优势主要体现在以下几个方面：
一、与系统刷新率同步
- 精准控制回调执行间隔：RAF 是严格跟着系统的刷新率（帧率）来的。如果系统的刷新率是 60Hz，那么 RAF 回调执行的间隔就是 16.67ms（1000/60）；如果系统的刷新率是 75Hz，那么 RAF 回调的执行间隔就是 13.33ms（1000/75）。这种机制确保了动画的流畅性和与显示器刷新率的同步，避免了动画的卡顿或撕裂现象。
二、优化 DOM 操作
减少重排和重绘次数：与 setInterval 不同，RAF 会把回调中的 DOM 操作集中起来，放到一次重排和重绘中。这意味着，即使你在回调中进行了多次 DOM 操作，RAF 也只会触发一次计算布局和生成绘制命令。这种优化显著减少了浏览器的重排和重绘次数，提高了页面的渲染性能。
类比 createDocumentFragment：这种思想类似于使用 createDocumentFragment 来批量处理 DOM 操作。通过创建一个文档片段，你可以在其中进行多次 DOM 操作，然后一次性将这个文档片段添加到 DOM 树中，从而避免多次触发重排和重绘。
三、节省 CPU 性能
- 页面最小化时暂停动画：当你使用 setInterval 来做动画时，即使页面被最小化了，setInterval 里面的回调依然会被执行。然而，RAF 在页面最小化时会暂停执行回调，直到页面重新打开时才会从之前暂停的地方继续运行。这种机制避免了在不需要渲染动画时浪费 CPU 资源。
四、防止过度执行
- 节流作用：如果新手在 setInterval 中设定了一个很小的值（小于刷新率），这会导致函数的多次无意义执行以及浏览器多次无意义的重排重绘。而 RAF 则会根据系统的刷新率来自动调整回调的执行频率，避免了这种过度执行的情况。这种节流作用有助于保持浏览器的响应性和稳定性。
五、更好的用户体验
- 动画连贯性：由于 RAF 与系统刷新率同步，并且优化了 DOM 操作，因此它能够提供更连贯、更平滑的动画效果。这对于提升用户体验至关重要，尤其是在需要高精度动画效果的场景中（如游戏、数据可视化等）。
综上所述，requestAnimationFrame 通过与系统刷新率同步、优化 DOM 操作、节省 CPU 性能、防止过度执行以及提供更好的用户体验等方面的优势，显著提高了前端动画的性能和流畅性。因此，在前端开发中，特别是在处理动画效果时，推荐使用 requestAnimationFrame 来替代传统的 setInterval 或 setTimeout 方法。
热门标签
