requestAnimationFrame

 (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'] || 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.requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

2.在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

 var lastTime = 0;

 var prefixes = 'webkit moz ms o'.split(' '); //各浏览器前缀

 var requestAnimationFrame = window.requestAnimationFrame;

 var cancelAnimationFrame = window.cancelAnimationFrame;

 var prefix;

 //通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式

 for( var i = 0; i < prefixes.length; i++ ) {

     if ( requestAnimationFrame && cancelAnimationFrame ) {

       break;

     }

     prefix = prefixes[i];

     requestAnimationFrame = requestAnimationFrame || window[ prefix + 'RequestAnimationFrame' ];

     cancelAnimationFrame  = cancelAnimationFrame  || window[ prefix + 'CancelAnimationFrame' ] || window[ prefix + 'CancelRequestAnimationFrame' ];

 }

 //如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout

 if ( !requestAnimationFrame || !cancelAnimationFrame ) {

     requestAnimationFrame = function( callback, element ) {

       var currTime = new Date().getTime();

       //为了使setTimteout的尽可能的接近每秒60帧的效果

       var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );

       var id = window.setTimeout( function() {

         callback( currTime + timeToCall );

       }, timeToCall );

       lastTime = currTime + timeToCall;

       return id;

     };

     cancelAnimationFrame = function( id ) {

       window.clearTimeout( id );

     };

 }

 //得到兼容各浏览器的API

 window.requestAnimationFrame = requestAnimationFrame;

 window.cancelAnimationFrame = cancelAnimationFrame;