何时使用requestAnimationFrame？

Question

刚刚发现requestAnimationFrame之后，我已经深入了解了我能找到的所有信息。仅列举我遇到的一些资源，以防其他人寻找有关它的更多信息：

• http://creativejs.com/resources/requestanimationframe/ - 解释有关它的基础知识。
• http://www.html5rocks.com/en/tutorials/speed/animations/ - 解释如何使用它。

无论如何，所有这些资源都告诉我一些关于requestAnimationFrame如何工作或如何使用/应该如何使用的信息，但它们都没有告诉我什么时候使用它。

• 我应该将它用于动画（重复更改元素的样式，就像CSS动画一样）？
• 当自动事件想要更改一个或多个元素的css /类时，我应该使用它吗？
• 当自动事件想要更改一个或多个元素的文本值时，我应该使用它吗？ （例如，每秒更新一次时钟的值）
• 当自动事件想要修改DOM时，我应该使用它吗？
• 当自动事件需要像.offsetTop，.offsetLeft这样的值时，我是否应该使用它，然后想要进一步改变顶部和左边的样式？
• 当用户生成的事件导致上述任何变化时，我应该使用它吗？

TL; DR：什么时候使用requestAnimationFrame？

Answer 1

你还不应该。至少不是这样。这仍然是实验性的，可能会或可能不会达到完整建议（it is still a working draft at this point）。也就是说，如果你不关心旧的浏览器，或willing to work with the polyfill available最好的时间使用它是当你想要在屏幕上绘制东西时需要浏览器重绘（大多数动画）。

对于DOM的许多简单修改，这种方法是过度的。只有在您快速绘制或移动项目并且需要确保浏览器重新绘制足以使其平滑时，才会进行动画制作。它将允许您确保您计算的每个帧都将被绘制到屏幕上。它还提供了一个实用程序，可以更准确地测量动画的时间。第一个参数是油漆发生的时间，因此您可以确保您在那个时刻就应该到达那里。

当您对DOM进行许多简单修改或不需要平滑过渡的事情时，不应该使用它。这将在用户的计算机上更加昂贵，因此您希望将其限制为在过渡，移动和动画中使事情更加平滑。每次在页面上进行更改时都不需要强制进行帧重绘，因为响应速度足够快，大多数情况下你不需要担心绘制之间的额外几毫秒。

Answer 2

正如之前的回答所说，你不应该在不连续动画中使用它，因为它不需要平滑过渡。在大多数情况下，它用于随时间不断变化的属性。