刚才发现了 requestAnimationFrame，我已经深入研究了所有我能找到的关于它的信息。仅举几个我遇到的资源，以防其他人在寻找有关它的更多信息:
- http://creativejs.com/resources/requestanimationframe/ - 解释有关它的基础知识。
- http://www.html5rocks.com/en/tutorials/speed/animations/ - 解释如何使用它。
无论如何，所有这些资源都告诉我一些关于 requestAnimationFrame 的工作原理或它可以/应该如何使用的信息，但没有一个告诉我什么时候使用它是正确的。
- 我应该将它用于动画(重复更改元素的样式，很像 CSS 动画)吗？
- 当自动事件想要更改一个或多个元素的 css/类时，我应该使用它吗？
- 当自动事件想要更改一个或多个元素的文本值时，我应该使用它吗？ (例如每秒更新一次时钟的值)
- 当自动事件想要修改 DOM 时我应该使用它吗？
- 当自动事件需要 .offsetTop、.offsetLeft 之类的值然后想要更改样式(例如顶部和左侧几行)时，我应该使用它吗？
- 当用户生成的事件导致上述任何变化时，我应该使用它吗？
TL;DR:什么时候使用 requestAnimationFrame 是正确的？
最佳答案
你还不应该。至少不是真的。这仍然是实验性的，可能会或可能不会达到完全推荐 (it is still a working draft at this point)。也就是说，如果您不关心旧版浏览器，或者 willing to work with the polyfill available使用它的最佳时间是当您希望将需要浏览器重新绘制的东西绘制到屏幕上时(大多数动画)。
对于 DOM 的许多简单修改，这种方法是大材小用。这仅在您正在快速绘制或移动项目并且需要确保浏览器重新绘制足以使其平滑时进行动画时才有用。它将允许您确保您计算的每一帧都将绘制到屏幕上。它还提供了一个实用程序，可以更准确地测量动画的时间。第一个参数是绘制发生的时间，因此您可以确保您在那个时刻应该在的位置。
当你对 DOM 做很多简单的修改，或者不需要平滑过渡的东西时，你不应该使用它。这在您用户的计算机上会花费更多，因此您希望将其限制为使过渡、移动和动画更流畅。每次在页面上进行更改时都不需要强制重绘框架，因为大多数情况下响应速度足够快，您无需担心绘制之间的额外几毫秒。
关于javascript - 什么时候使用requestAnimationFrame？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13522602/