window.requestAnimationFrame

requestAnimationFrame类似setTimeout，不同的是requestAnimationFrame会在浏览器下次重绘之前调用指定的回调函数，具体刷新间隔取决于浏览器的刷新频率。该方法使用一个回调函数作为参数，这个回调函数只有一个传参，DOMHighResTimeStamp，指示requestAnimationFrame() 开始触发回调函数的当前时间（performance.now() 返回的时间）。

注：performance.now()是当前时间与performance.timing.navigationStart（开始导航到当前页面的时间，即在地址栏输入地址后按下回车时的时间）的时间差，以微秒（百万分之一秒）为单位的时间

需要注意的是requestAnimationFrame和setTimeout一样只会调用一次，如果需要重复执行必须在回调函数中再次调用requestAnimationFrame()。

requestAnimationFrame()会返回一个 long 整数，请求 ID ，是回调列表中唯一的标识，是个非零值。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

requestAnimationFrame()的特点：
requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量
requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销（举个例子比如：页面最小化了，或者被Tab切换了。页面是不会重绘的，自然，requestAnimationFrame也不会调用（没通知啊）。页面绘制全部停止，资源高效利用。）

requestAnimationFrame的兼容性存在一些问题，所以需要做一些兼容处理

window.requestAnimationFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
            return window.setTimeout(callback, 1000 / 60);
        };
})();

包含了cancelAnimationFrame的兼容

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
        // Webkit中此取消方法的名字变了 
        window[vendors[x] + 'CancelRequestAnimationFrame'];
    }
    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
            var id = window.setTimeout(function() {
                callback(currTime + timeToCall);
            },
            timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }
    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
    }
} ());