为什么 requestAnimationFrame 比 setInterval 或 setTimeout 更好

虽然 setInterval 和 setTimeout 都可以用于动画任务，但出于多种原因，requestAnimationFrame 通常被认为是更好的选择。

1。与显示刷新率同步

requestAnimationFrame 将其回调与设备的显示刷新率同步，通常为 60Hz。这意味着动画以一致的帧速率更新，消除了 setInterval 或 setTimeout 可能出现的抖动和断断续续。

2。减少资源消耗

setInterval 和 setTimeout 按指定的时间间隔调用它们的回调，即使浏览器没有主动渲染也是如此。这可能会导致不必要的 CPU 使用和电池消耗。而 requestAnimationFrame 仅在浏览器即将显示新帧时调用其回调，从而节省资源。

3.增强的用户体验

与使用 setInterval 或 setTimeout 的动画相比，由 requestAnimationFrame 提供支持的动画感觉更流畅且响应更快。这是因为 requestAnimationFrame 会考虑设备的刷新率并确保动画以一致的、视觉上令人愉悦的速度运行。

4. Timestamp 的可用性

requestAnimationFrame 为其回调提供了一个时间戳参数，该参数表示帧计划显示的时间。该时间戳可用于计算自上一帧以来经过的时间，从而实现更精确的动画控制和平滑的过渡。

5.消除剪切和闪烁

requestAnimationFrame 解决了 setInterval 或 setTimeout 可能出现的剪切（动画位置不匹配）和闪烁（显示不完整的帧）等问题。这是因为它仅在当前帧完全呈现在屏幕上时才调度下一帧渲染。

综上所述，requestAnimationFrame 是动画任务的首选，因为它与显示刷新率同步，减少了资源消耗、增强的用户体验、时间戳的可用性以及消除剪切和闪烁。