何时使用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

你还不应该。至少不是真的。这仍然是实验性的，可能会也可能不会达到完全推荐（目前它仍然是一个工作草案）。也就是说，如果您不关心较旧的浏览器，或者愿意使用可用的polyfill，那么使用它的最佳时机是当您希望将内容绘制到屏幕上并需要浏览器重新绘制（大多数动画）时。

对于许多简单的 DOM 修改来说，这种方法有点大材小用了。仅当您正在制作动画时，当您将快速绘制或移动项目并需要确保浏览器重绘保持足够的速度以使其平滑时，这才变得有用。它将允许您确保您计算的每一帧都会绘制到屏幕上。它还提供了一个实用程序，可以更准确地测量动画的时间。第一个参数是绘制发生的时间，因此您可以确保您当时处于应该所在的位置。

当你对 DOM 做很多简单的修改，或者不需要平滑过渡的事情时，你不应该使用它。这对于用户的计算机来说会更加昂贵，因此您希望限制这一点以使过渡、移动和动画更加流畅。每次在页面上进行更改时，不需要强制框架重绘，因为大多数时候响应足够快，您无需担心绘制之间额外的几毫秒。