requestAnimationFrame定时动画屏幕刷新率节流示例浅析.docxVIP

第

requestAnimationFrame定时动画屏幕刷新率节流示例浅析

目录前言早期定时动画屏幕刷新率requestAnimationFramecancelAnimationFrame通过requestAnimationFrame节流

前言

很长时间以来，计时器和定时执行都是JavaScript动画最先进的工具。虽然CSS过渡和动画方便了开发者实现某些动画，但JavaScript动画领域多年来进展甚微。requestAnimationFrame()方法应运而生，这个方法会告诉浏览器要执行动画了，于是浏览器可以通过最优方式确定重绘的时序。

早期定时动画

以前，在JavaScript中创建动画基本上就是使用setInterval()来控制动画的执行：

(function(){

functionupdateAnimations(){

doAnimation1();

doAnimation2();

//...

setInterval(updateAnimations,100);

})();

这种定时动画的问题在于，无法准确知晓循环之间的延时。

无论是setInterval()还是setTimeout()，都是不能保证时间精度的。作为第二个参数的延时只能保证何时会把代码添加到浏览器的任务队列，并不能保证添加到队列就会立即执行。如果队列前面还有其他任务，那么就要等这些任务执行完再执行。

简单来讲，这里的毫秒延时不是指何时这些代码会执行，而是指到时候会把回调添加到任务队列。如果添加到队列后，主线程还被其他任务占用，那么回调就不会立即执行。

知道何时绘制下一帧是创造平滑动画的关键，所以setInterval()和setTimeout()的不精确是个大问题。

浏览器自身计时器的精度让这个问题雪上加霜。浏览器计时器的精度不足毫秒，最厉害的Chrome计时器精度为4ms。更麻烦的是，浏览器又开始对切换到后台或不活跃的标签页中的计时器执行限流，因此即使将时间间隔设为最优，也免不了只能得到近似的结果。

屏幕刷新率

一般计算机显示器的屏幕刷新率都是60HZ，基本上意味着每秒需要重绘60次。大多数浏览器会限制重绘频率，使其不超过屏幕的刷新率，因为超过屏幕刷新率用户也感知不到。

所以，实现平滑动画最佳的重绘时间间隔为1000ms/60，大约17ms。以这个速度重绘可以实现最平滑的动画，因为这已经是浏览器的极限了。

requestAnimationFrame

requestAnimationFrame()这个方法可以通知浏览器某些JavaScript代码要执行动画了，这样浏览器就可以在运行某些代码后进行适当的优化。

requestAnimationFrame()这个方法接收一个参数，该参数是一个要在重绘屏幕前调用的函数。这个函数就是修改DOM样式以反映下一次重绘有什么变化的地方。为了实现动画循环，可以把多个requestAnimationFrame()调用串联起来，就像以前使用setTimeout()一样：

functionupdateProgress(){

vardiv=document.getElementById(status);

div.style.width=parseInt(div.style.width,10)+5+%;

if(div.style.left!=100%){

requestAnimationFrame(updateProgress);

requestAnimationFrame(updateProgress);

因为requestAnimationFrame()只会调用一次传入的函数，所以每次更新用户界面时需要再手动调用它一次。同时，也需要控制动画何时停止。结果就会得到非常平滑的动画。

requestAnimationFrame()已经解决了浏览器不知道JavaScript动画何时开始的问题，以及最佳间隔时间是多少的问题。但是，如果我们想知道自己的代码实际的执行时间呢？同样有解决方案。

传给requestAnimationFrame()的函数实际上可以接收一个参数，该参数表示下次重绘的时间。这一点非常重要：requestAnimationFrame()实际上把重绘任务安排在了未来一个已知的时间点上，而且通过这个参数告诉了开发者，那么基于这个参数，就可以更好地决定如何调优动画了：

functi