定时神器requestAnimationFrame

基本概念 — 帧

帧，可以理解为浏览器每绘制一次叫做一帧。 1s内绘制的次数，叫做帧率（fps）。 一般的设备是1s内绘制60次，即帧率为60fps。也就是1帧为16.7ms，每16.7ms屏幕就会刷新一次。

渲染帧的流程

也就是说，浏览器在绘制一帧时，在16.7ms内要完成一下步骤 ：

• JavaScript：通过js来改动一些视觉效果，比如基于js的动画，或者响应用户事件
• Style：如果通过js改变了某个dom的样式，就会重新计算受影响的元素的样式
• Layout：如果改变中涉及到了布局的属性，比如改变几何位置，还要重新计算它的布局位置。
• Paint：计算出Style和Layout后，就可以把元素绘制到它所属的paint layer上
• Composite：最后，合成各层的渲染结果

动画的原理

刷新频率为60Hz的屏幕每16.7ms刷新一次，我们在屏幕每次刷新前，将图像的位置向左移动一个像素，即1px。这样一来，屏幕每次刷出来的图像位置都比前一个要差1px，因此你会看到图像在移动；由于我们人眼的视觉停留效应，当前位置的图像停留在大脑的印象还没消失，紧接着图像又被移到了下一个位置，因此你才会看到图像在流畅的移动，这就是视觉效果上形成的动画。

setTimeout

setTimeout可以用到动画中，通过设置一个时间间隔来不断改变图像的位置。从而达到一个动画的效果。但是利用setTimeout实现的动画在某些低端机上会出现卡顿。抖动的现象。原因是：

• setTimeout的执行时间并不是确定的。在JavaScript中，setTimeout任务被放进了异步任务队列中，当主进程的任务执行之后，才会去检查异步队列里的任务是否要开始执行。因此setTimeout实际执行的时间比其设定的时间要晚一些。
• 不同设备的屏幕刷新的频率可能不同（可能不是16.7ms刷新一次），而setTimeout设置的只能是一个固定的时间间隔，这个时间不一定与屏幕的刷新时间相同。

这两种情况都会导致setTimeout的执行步调与屏幕的刷新步调不一致，从而引起丢帧现象。利用setTimeout改变图像，只能在屏幕下一次刷新时才能被更新到屏幕上。如果两者步调不一致，就可以导致中间的某个setTimeout的操作直接被跨过去了。

假设屏幕每隔16.7ms刷新一次，而setTimeout每隔10ms设置图像向左移动1px， 就会出现如下绘制过程：

• 第0ms: 屏幕未刷新，等待中，setTimeout也未执行，等待中；

• 第10ms: 屏幕未刷新，等待中，setTimeout开始执行并设置图像属性left=1px；

• 第16.7ms: 屏幕开始刷新，屏幕上的图像向左移动了1px， setTimeout 未执行，继续等待中；

• 第20ms: 屏幕未刷新，等待中，setTimeout开始执行并设置left=2px;

• 第30ms: 屏幕未刷新，等待中，setTimeout开始执行并设置left=3px;

• 第33.4ms:屏幕开始刷新，屏幕上的图像向左移动了3px， setTimeout未执行，继续等待中；

• …
  从上面的绘制过程中可以看出，屏幕没有更新left=2px的那一帧画面，图像直接从1px的位置跳到了3px的的位置，这就是丢帧现象，这种现象就会引起动画卡顿。

requestAnimationFrame的使用

requestAnimationFrame是由浏览器专门为动画提供的API，与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。 具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号。这个编号可以传递给cancelAnimationFrame用于取消这个函数的执行。

var timer  = requestAnimationFrame(function() {
	console.log(0); // 0
});
console.log(timer); // 1

先打印1，后在打印0。

cancelAnimationFrame方法用于取消定时器：

// 控制器什么都不输出
var timer = requestAnimationFrame(function() {
	console.log(0);  
});
cancelAnimationFrame(timer);
// 也可以直接使用返回值进行取消
// cancelAnimationFrame(1);

兼容

IE9-浏览器不支持该方法，可以使用setTimeout来兼容。

if (!window.requestAnimationFrame) {
    requestAnimationFrame = function(fn) {
        setTimeout(fn, 16.7);
    };    
}

使用requestAnimationFrame 做一个进度条效果：

<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn">run</button>
<script>
var timer;
btn.onclick = function(){
    myDiv.style.width = '0';
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        if(parseInt(myDiv.style.width) < 500){
            myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
            myDiv.innerHTML =     parseInt(myDiv.style.width)/5 + '%';
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        }    
    });
}
</script>

优势

requestAnimationFrame还有以下两个优势：

• CPU节能：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。

• 函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次时没有意义的，因为显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。

参考文章：

• 深入理解requestAnimationFrame