深入理解requestAnimationFrame的动画循环

一、初识requestAnimationFrame

requestAnimationFrame解决了浏览器不知道javascript动画什么时候开始、不知道最佳循环间隔时间的问题。它是跟着浏览器的绘制走的，如果浏览器绘制间隔是16.7ms，它就按这个间隔绘制；如果浏览器绘制间隔是10ms, 它就按10ms绘制。这样就不会存在过度绘制的问题，动画不会丢帧。

内部是这么运作的：

浏览器页面每次要重绘，就会通知requestAnimationFrame;

这是资源非常高效的一种利用方式。

怎么讲呢？

有以下两点：

      1、就算很多个requestAnimationFrame()要执行，浏览器只要通知一次就可以了。而setTimeout是多个独立绘制。

      2、一旦页面不出于当前页面(比如：页面最小化了)，页面是不会进行重绘的，自然requestAnimationFrame也不会触发(因为没有通知)。页面绘制全部停止，资源高效利用。
编

二. 动画的循环间隔

编写动画循环的关键，是要知道延迟时间多长合适。一方面，循环时间必须足够短，这样才能保证动画效果更平滑流畅；另一方面，循环还要足够长，这样才能保证浏览器有能力渲染产生的变化。大多数显示器的刷新频率是60Hz，相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过了这个频率，用户体验也不会有提升。

因此最平滑动画的最佳循环间隔是1000ms/60，约等于17ms。以这个循环间隔重绘的动画是平滑的，因为这个速度最接近浏览器的最高限速。为了适应17ms的循环间隔，多重动画可能需要加以节制，以便不会完成得太快。

虽然与使用多组setTimeout()相比，使用setInterval()的动画循环效率更高。但是无论setTimeout()还是setInterval()都不十分精确。为它们传入的第二个参数，实际上只是指定了把动画代码添加到浏览器UI线程队列以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务执行完成后再执行。如果UI线程繁忙，比如忙于处理用户操作，那么即使把代码加入队列也不会立即执行。

因此，知道什么时候绘制下一帧是保证动画平滑的关键。然而，面对不十分精确的setTimeout()和setInterval() ，开发人员至今都没有办法确保浏览器按时绘制下一帧。

以下是几个浏览器的计时器精度：

      IE8及其以下版本浏览器： 15.6ms；

      IE9及其以上版本浏览器：4ms；

      Firefox和Safari：10ms；

      Chrome：4ms。