标签：

//  //  // requestAnimationFrame polyfill by Erik M?ller. fixes from Paul Irish and Tino Zijdel // MIT license (function() {     var lastTime = 0;     var vendors = [‘ms‘, ‘moz‘, ‘webkit‘, ‘o‘];     for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {         window.requestAnimationFrame = window[vendors[x]+‘RequestAnimationFrame‘];         window.cancelAnimationFrame = window[vendors[x]+‘CancelAnimationFrame‘]                                     || window[vendors[x]+‘CancelRequestAnimationFrame‘];     }       if (!window.requestAnimationFrame)         window.requestAnimationFrame = function(callback, element) {             var currTime = new Date().getTime();             var timeToCall = Math.max(0, 16 - (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);         }; }());

比较常用的使用场景：调节重新渲染，，提高网页性能。（将某些代码放到下一次重新渲染时执行。）

（以下场景来自：）

场景1：

function doubleHeight(element) {   var currentHeight = element.clientHeight;   element.style.height = (currentHeight * 2) + ‘px‘; } elements.forEach(doubleHeight);

上面的代码使用循环操作，将每个元素的高度都增加一倍。可是，每次循环都是，读操作后面跟着一个写操作。这会在短时间内触发大量的重新渲染，显然对于网页性能很不利。

我们可以使用window.requestAnimationFrame()，让读操作和写操作分离，把所有的写操作放到下一次重新渲染。

function doubleHeight(element) {   var currentHeight = element.clientHeight;   window.requestAnimationFrame(function () {     element.style.height = (currentHeight * 2) + ‘px‘;   }); } elements.forEach(doubleHeight);

场景2：

页面滚动事件（scroll）的监听函数，就很适合用 window.requestAnimationFrame() ，推迟到下一次重新渲染。

$(window).on(‘scroll‘, function() {    window.requestAnimationFrame(scrollHandler); });

场景3：

最适用的场合还是网页动画。下面是一个旋转动画的例子，元素每一帧旋转1度。

var rAF = window.requestAnimationFrame; var degrees = 0; function update() {   div.style.transform = "rotate(" + degrees + "deg)";   console.log(‘updated to degrees ‘ + degrees);   degrees = degrees + 1;   rAF(update); } rAF(update);

window.requestAnimationFrame 兼容性封装，调节重新渲染，提高网页性能