javascript - Canvas 动画的 requestAnimFrame 或 setInterval？

Question

哪个最适合 Canvas 动画？ requestAnimFrame 或 setInterval ？

Answer 1

requestAnimationFrame 保证您的动画恰好在浏览器准备好绘制新帧时运行。如果您使用 setInterval，您将面临以下任一风险:

• 使间隔太短，在这种情况下，您会耗尽电池生命周期执行永远不会显示的过于频繁的绘制操作
• 使间隔太长，在这种情况下，使用较短的间隔可以获得更流畅的动画

requestAnimationFrame 可以在页面不可见时节流以降低运行频率(这可以节省电池生命周期)，但是 setInterval 的一些实现也可以做到这一点(目前在Firefox 和 Chrome)。

requestAnimationFrame 是从头开始构建的，目的是将其用于动画； setInterval 旨在执行任何需要定期操作的操作。如果您正在制作动画(尤其是 Canvas 动画)，我建议您使用 requestAnimationFrame，并为旧版浏览器回退到 setInterval。