使用requestAnimationFrame實作js動畫效能好。先跟大家簡單介紹下requestAnimationFrame比起setTimeout、setInterval有哪些優點？
範例一：
requestAnimationFrame 比起 setTimeout、setInterval的優點主要有兩點：
1、requestAnimationFrame 會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成，並且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率，一般來說，這個頻率為每秒60幀。
2.在隱藏或不可見的元素中，requestAnimationFrame將不會進行重繪或回流，這當然就意味著更少的的cpu，gpu和記憶體使用量。
像setTimeout、setInterval一樣，requestAnimationFrame是一個全域函數。呼叫requestAnimationFrame後，它會要求瀏覽器根據自己的頻率進行一次重繪，它接收一個回調函數作為參數，在即將開始的瀏覽器重繪時，會呼叫這個函數，並會給這個函數傳入呼叫回調函數時的時間作為參數。由於requestAnimationFrame的功效只是一次性的，所以若想達到動畫效果，則必須連續不斷的呼叫requestAnimationFrame，就像我們使用setTimeout來實現動畫所做的那樣。 requestAnimationFrame函數會傳回一個資源標識符，可以把它當作參數傳入cancelAnimationFrame函數來取消requestAnimationFrame的回調。怎麼樣，是不是也跟setTimeout的clearTimeout很像。
所以，可以這麼說，requestAnimationFrame就是一個效能最佳化版、專為動畫量身打造的setTimeout，不同的是requestAnimationFrame不是自己指定回呼函數運行的時間，而是跟著瀏覽器內建的刷新頻率來執行回調，這當然就能達到瀏覽器所能達到動畫的最佳效果了。
目前，各個支援requestAnimationFrame的瀏覽器有些還是自己的私有實現，所以必須加前綴，對於不支援requestAnimationFrame的瀏覽器，我們只能使用setTimeout，因為兩者的使用方式幾乎相同，所以這兩者的兼容並不難。對於支援requestAnimationFrame的瀏覽器，我們使用requestAnimationFrame，而不支援的我們優雅降級使用傳統的setTimeout。把它們封裝一下，就能得到一個統一相容各大瀏覽器的API了。
程式碼可以到這裡來查看：https://gist.github.com/chaping/88813f56e75b0fd43f8c
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;
這樣子我們就能在所有瀏覽器上使用requestAnimationFrame和cancelAnimationFrame了。
以下舉個簡單的例子來說明怎麼運用requestAnimationFrame進行動畫，下面的程式碼會將id為demo的div以動畫的形式向右移動到300px
<div id="demo" style="position:absolute; width:100px; height:100px; background:#ccc; left:0; top:0;"></div>
<script>
var demo = document.getElementById('demo');
function rander(){
demo.style.left = parseInt(demo.style.left) + 1 + 'px'; //每一帧向右移动1px
}
requestAnimationFrame(function(){
rander();
//当超过300px后才停止
if(parseInt(demo.style.left)<=300) requestAnimationFrame(arguments.callee);
});
</script>
範例二：
一直以來，JavaScript的動畫都是透過計時器和間隔來實現的。雖然使用CSS transitions 和 animations使Web開發實現動畫更加方便，但多年來以JavaScript為基礎來實現動畫卻很少有所改變。直到Firefox 4的發布，才帶來了第一種對JavaScript動畫的改善的方法。但要充分認識改善，這有利於幫助我們了解web動畫是如何演變改進的。
定時器Timer
用於建立動畫的第一個模式是使用鍊式setTimeout()呼叫。在Netscape 3′s hayday的很長一段時期，開發者都記得一種在網絡上隨處可見的固定式最新行情狀態欄，通常它類似於這樣:
(function(){
var msg = "新的广告",
len = 25,
pos = 0,
padding = msg.replace(/./g, " ").substr(0,len),
finalMsg = padding + msg;
function updateText(){
var curMsg = finalMsg.substr(pos++, len);
window.status = curMsg;
if (pos == finalMsg.length){ pos = 0; }
setTimeout(updateText, 100);
}
setTimeout(updateText, 100);
})();
如果你想在瀏覽器中測試這段程式碼，你可以新建一個
標籤用來模擬window.status，例如：newsticker example
這種令人煩惱的web模式，後來遭到對window.status禁用的抵抗，但隨著Explorer 4和Netscape 4的發布，瀏覽器第一次給開發者更多對頁面元素的控制權限，這種技術再次出現。這樣就出現了使用javascript動態改變元素大小、位置、顏色等的一種全新動畫模式。例如，以下就是一個將div寬度變化成100%的動畫（類似進度條）:
(function(){
function updateProgress(){
var div = document.getElementByIdx_x("status");
div.style.width = (parseInt(div.style.width, 10) + 5) + "%";
if (div.style.width != "100%"){ setTimeout(updateProgress, 100); }
}
setTimeout(updateProgress, 100);
})();
尽管动画在页面上的地方不同，但基本原理却是一样的：做出改变，用setTimeout()间隔使页面更新，然后setTimeout又执行下一次变化，这个过程反复执行，直到动画完成（见进度条动画），早期的状态栏动画是相同的技术，只是动画不一样而已。
间隔动画Intervals
随着成功将动画引入web，新的探索开始了。一个动画已经无法满足了，现在需要多个动画。首次尝试为每个动画创建多个动画循环，在早期的浏览器中使用setTimeout()来创建多个动画是有点复杂的，所以开发商开始使用setInterval()一创建单一的动画循环，来管理页面上所有的动画，一个使用wetInterval()的基本动画像这样:
(function(){
function updateAnimations(){
updateText();
updateProgress();
}
setInterval(updateAnimations, 100);
})();
创建一个小动画库，updateAnimations（）方法将每一个动画(同时看到一个新闻股票和进度条在一起运行)循环执行并进行适当的改变。如果没有动画需要更新，该方法可以退出而不做任何事情，甚至停止动画循环，直到有更多的动画更新做好准备。
动画问题比较棘手的问题是延迟应该为多少。间隔一方面必须足够短，从而使不同的动画都能流畅的进行，别一方面还要足够长，使得浏览器可以完成渲染。大多数浏览器的刷新频率为60HZ，即每秒60次刷新，大多数浏览器的刷新频率都不会比这个更频繁，因为他们知道，最终用户是得不到更好的体验的。
鉴于此，为流畅动画的最佳时间间隔为1000毫秒/ 60，约17ms。在这个频率你会看到流畅的动画，那是因为你最大的接近了浏览器能达到的频率。跟以前的动画相比，你会发现17ms间隔的动画更加平滑，也更快（因为动画更新更频繁，没有做其他任何修改的情况下），多个动画可能需要节流，以免17ms的动画完成得太快。
问题
即使使用setInterval()为基础的动画循环比多套使用setTimeout()的动画循环高效，这里还是存在问题。无论是setInterval()还是setTimeout()都无法达到精确，这个延迟即你指定的第二个参数仅仅表示何时代码会添加到浏览器的可能被执行的UI线程队列中。如果队列中有其他工作在此之前，那代码将会等到他完成才会执行。简而言之，毫秒级的延迟不是表示何时代码会执行，而是表示何时代码会添加进队列。如果UI线程处于繁忙状态或在处理用户动作，那么代码将不会被马上执行。
平滑动画的关键是理解下一帧何时被执行，直到现在都没有一个方法来保证下一帧将会在浏览器中被绘制。随着的日益流行和新的基于浏览器的游戏的出现，开发商对setInterval()和setTimeout()的不精准越来越感到失望。
浏览器的计时器分辨率加剧了这个问题，计时器对毫秒不精准，这里有一些常见的计时器分辨率：
Internet Explorer 8 and earlier 15.625ms
Internet Explorer 9 and later 4ms.
Firefox and Safari ~10ms.
Chrome has a timer 4ms.
IE在版本9之前的的分辨率为15.625，所以0~15之间的任意值可能是0或15，但没有分别。IE9的计时器分辨率改进为4ms，但涉及到动画时也是不具体的，chrome的计时器分辨率为4ms，firefox 和 safari的为10ms。因此即使你把间隔设定为最佳的显示效果，你也仅仅是得到这个近似值。
mozRequestAnimationFrame
Mozilla 的 Robert O'Callahan 在思考这个问题，并想出了一个独特的方案。他指出CSS transitions 和 animations的优势在于浏览器知道哪些动画将会发生，所以得到正确的间隔来刷新UI。而javascript动画，浏览器不知道动画正在发生。他的解决方案是创建一个mozRequestAnimationFrame()方法来告诉浏览器哪些javascript代码正在执行，这使得浏览在执行一些代码后得到优化。
mozRequestAnimationFrame()方法接受一个参数，是一个屏幕重绘前被调用的函数。这个函数用来对生成下合适的dom样式的改变，这些改变用在下一次重绘中。你可以像调用setTimeout()一样的方式链式调用mozRequestAnimationFrame()，例如:
function updateProgress(){
var div = document.getElementByIdx_x("status");
div.style.width = (parseInt(div.style.width, 10) + 5) + "%";
if (div.style.left != "100%"){
mozRequestAnimationFrame(updateProgress);
}
}
mozRequestAnimationFrame(updateProgress);
由于mozRequestAnimationFrame()只运行给定的函数一次，你需要在下一次UI动画的时候再次调用它。你也需要相同的方法来管理何时停止调用。很酷，是非常流畅的动画增强的实例。
因此，mozRequestAnimationFrame()解决了浏览器不知道Javascript动画正在执行和不知道多少才是合适的间隔的问题，但对于不知道何时你的代码才被真正执行，也是由这个方案来解决的。
传递给mozRequestAnimationFrame()的函数实际是一个下一次重绘何时发生的的时间码（以毫秒为单位自1970年1月1日计算）。这是很重要的一点：mozRequestAnimationFrame()实际上列表出将要重绘的点并可以告诉你他们所处的时间。这样你就能够决定怎样更好的来调整你的动画。
为了得到上次重绘过去的时间，你可以查询mozAnimationStartTime，其中包含了过去重绘的时间代码。减去传递回调时的这个值可以计算出下一次重绘到屏幕时所用的时间。使用这些值的典型模式如下:
function draw(timestamp){
//calculate difference since last repaint
var diff = timestamp - startTime;
//use diff to determine correct next step
//reset startTime to this repaint
startTime = timestamp;
//draw again
mozRequestAnimationFrame(draw);
}
var startTime = mozAnimationStartTime;
mozRequestAnimationFrame(draw);
关键是第一次不是通过callback调用时，mozAnimationStartTime是到mozRequestAnimationFrame()经过的时间。如果是在回调函数中，mozAnimationStartTime是通过参数传递进来的时间代码平均值。
webkitRequestAnimationFrame
在很多人热忠于chrome时，随即创建了webkitRequestAnimationFrame()方法。这个版本与firefox的版本在两方面有着细微的差别。一方面，它不通过回调函数传递时间代码，你将无法知道下次重绘何时发生，另一方面，它添加了第二个可选参数来确定哪一个DOM元素发生改变。因此，如果你知道重绘发生在页面哪个部分的元素内，你可以限制重绘发生的区域。
应该不会感到惊讶，有没有相应的mozAnimationStartTime，因为如果没有下一个重绘的时间信息不是很有益。有，只是webkitCancelAnimationFrame()取消了之前计划的重绘。
如果你不需要精确的时间差异，你可以用下面的方式来创建一个用于Firefox4和chrome10+的动画:
function draw(timestamp){
//calculate difference since last repaint
var drawStart = (timestamp || Date.now()),
diff = drawStart - startTime;
//use diff to determine correct next step
//reset startTime to this repaint
startTime = drawStart;
//draw again
requestAnimationFrame(draw);
}
var requestAnimationFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame,
startTime = window.mozAnimationStartTime || Date.now();
requestAnimationFrame(draw);
这种模式使用可用的方法来创建以花费多少时间为理念的循环动画。Firefox使用时间代码信息是有用的，而Chrome默认为欠精准的时间对象。当用这种模式的时候，时间的差异给你一种多少时间过去了的想法，但不会告诉你Chrome的下一次重绘出现在何时。不过这比只有多少时间过去了的模糊概念要好些。
总结
mozRequestAnimationFrame()方法的介绍为推动Javascript 动画及web的历史发展有着非常重要的作用。如前所述，JavaScript动画的态几乎和JavaScript的初期一样。随着浏览器逐渐推出CSS transitions 和 animations，很高兴看到基于JavaScript的动画的关注，因为这些在基于的游戏领域将变得更重要和更与CUP联系紧密。知道Javascript何时尝试动画，允许浏览器做更多的优化处理，包括在tab处于后台或移动设备电量过低时停止进程。
该requestAnimationFrame（）API现在正由W3C起草一个新议案，并正由Mozilla和Google努力使之成为Web大舞台的一部分。很高兴能看到这两大集团这么迅速的兼容（可能不完全）实现。
RequestAnimFrame使用
对于一个侦中对DOM的所有操作，只进行一次Layout和Paint。
如果发生动画的元素被隐藏了，那么就不再去Paint。
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000/60);
};
})();
//调用
function animationLoop(elem){
requestAnimFrame(animationLoop);
//logic
}
Or
window.requestAnimFrame = (function(w, r) {
w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r] || function(c){ w.setTimeout(c, 1000 / 60); };
return w['r'+r];
})(window, 'equestAnimationFrame');
以上通过两段代码示例详解说明了使用requestAnimationFrame实现js动画性能好，希望大家喜欢。
