使用requestAnimationFrame實(shí)現(xiàn)js動(dòng)畫性能好。先給大家簡單介紹下requestAnimationFrame比起setTimeout、setInterval有哪些優(yōu)勢？

示例一：

requestAnimationFrame 比起 setTimeout、setInterval的優(yōu)勢主要有兩點(diǎn)：
1、requestAnimationFrame 會(huì)把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成，并且重繪或回流的時(shí)間間隔緊緊跟隨瀏覽器的刷新頻率，一般來說，這個(gè)頻率為每秒60幀。
2、在隱藏或不可見的元素中，requestAnimationFrame將不會(huì)進(jìn)行重繪或回流，這當(dāng)然就意味著更少的的cpu，gpu和內(nèi)存使用量。
像setTimeout、setInterval一樣，requestAnimationFrame是一個(gè)全局函數(shù)。調(diào)用requestAnimationFrame后，它會(huì)要求瀏覽器根據(jù)自己的頻率進(jìn)行一次重繪，它接收一個(gè)回調(diào)函數(shù)作為參數(shù)，在即將開始的瀏覽器重繪時(shí)，會(huì)調(diào)用這個(gè)函數(shù)，并會(huì)給這個(gè)函數(shù)傳入調(diào)用回調(diào)函數(shù)時(shí)的時(shí)間作為參數(shù)。由于requestAnimationFrame的功效只是一次性的，所以若想達(dá)到動(dòng)畫效果，則必須連續(xù)不斷的調(diào)用requestAnimationFrame，就像我們使用setTimeout來實(shí)現(xiàn)動(dòng)畫所做的那樣。requestAnimationFrame函數(shù)會(huì)返回一個(gè)資源標(biāo)識(shí)符，可以把它作為參數(shù)傳入cancelAnimationFrame函數(shù)來取消requestAnimationFrame的回調(diào)。怎么樣，是不是也跟setTimeout的clearTimeout很相似啊。
所以，可以這么說，requestAnimationFrame就是一個(gè)性能優(yōu)化版、專為動(dòng)畫量身打造的setTimeout，不同的是requestAnimationFrame不是自己指定回調(diào)函數(shù)運(yùn)行的時(shí)間，而是跟著瀏覽器內(nèi)建的刷新頻率來執(zhí)行回調(diào)，這當(dāng)然就能達(dá)到瀏覽器所能實(shí)現(xiàn)動(dòng)畫的最佳效果了。
目前，各個(gè)支持requestAnimationFrame的瀏覽器有些還是自己的私有實(shí)現(xiàn)，所以必須加前綴，對(duì)于不支持requestAnimationFrame的瀏覽器，我們只能使用setTimeout，因?yàn)閮烧叩氖褂梅绞綆捉嗤赃@兩者的兼容并不難。對(duì)于支持requestAnimationFrame的瀏覽器，我們使用requestAnimationFrame，而不支持的我們優(yōu)雅降級(jí)使用傳統(tǒng)的setTimeout。把它們封裝一下，就能得到一個(gè)統(tǒng)一兼容各大瀏覽器的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在當(dāng)前瀏覽器的實(shí)現(xiàn)形式
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' ];
}
//如果當(dāng)前瀏覽器不支持requestAnimationFrame和cancelAnimationFrame，則會(huì)退到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了。
下面舉個(gè)簡單的例子來說明怎么運(yùn)用requestAnimationFrame進(jìn)行動(dòng)畫，下面的代碼會(huì)將id為demo的div以動(dòng)畫的形式向右移動(dòng)到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'; //每一幀向右移動(dòng)1px
}
requestAnimationFrame(function(){
 rander();
 //當(dāng)超過300px后才停止
 if(parseInt(demo.style.left)<=300) requestAnimationFrame(arguments.callee);
});
</script>

示例二：

一直以來，JavaScript的動(dòng)畫都是通過定時(shí)器和間隔來實(shí)現(xiàn)的。雖然使用CSS transitions 和 animations使Web開發(fā)實(shí)現(xiàn)動(dòng)畫更加方便，但多年來以JavaScript為基礎(chǔ)來實(shí)現(xiàn)動(dòng)畫卻很少有所改變。直到Firefox 4的發(fā)布，才帶來了第一種對(duì)JavaScript動(dòng)畫的改善的方法。但要充分認(rèn)識(shí)改善，這有利于幫助我們了解web動(dòng)畫是如何演變改進(jìn)的。
定時(shí)器Timer
用于創(chuàng)建動(dòng)畫的第一個(gè)模式是使用鏈?zhǔn)絪etTimeout()調(diào)用。在Netscape 3′s hayday的很長一段時(shí)期，開發(fā)者都記得一種在網(wǎng)絡(luò)上隨處可見的固定式最新行情狀態(tài)欄，通常它類似于這樣:

(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); 
})(); 

 如果你想在瀏覽器中測試這段代碼，你可以新建一個(gè)
標(biāo)簽用來模擬window.status，例如：newsticker example
這種讓人煩惱的web模式，后來遭到對(duì)window.status禁用的抵抗，但隨著Explorer 4和Netscape 4的發(fā)布，瀏覽器第一次給開發(fā)者更多對(duì)頁面元素的控制權(quán)限，這種技術(shù)再次出現(xiàn)。這樣就出現(xiàn)了使用javascript動(dòng)態(tài)改變?cè)卮笮?、位置、顏色等的一種全新動(dòng)畫模式。例如，下面就是一個(gè)將div寬度變化成100%的動(dòng)畫（類似于進(jìn)度條）:

(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); 
})(); 

盡管動(dòng)畫在頁面上的地方不同，但基本原理卻是一樣的：做出改變，用setTimeout()間隔使頁面更新，然后setTimeout又執(zhí)行下一次變化，這個(gè)過程反復(fù)執(zhí)行，直到動(dòng)畫完成（見進(jìn)度條動(dòng)畫），早期的狀態(tài)欄動(dòng)畫是相同的技術(shù)，只是動(dòng)畫不一樣而已。
間隔動(dòng)畫Intervals
隨著成功將動(dòng)畫引入web，新的探索開始了。一個(gè)動(dòng)畫已經(jīng)無法滿足了，現(xiàn)在需要多個(gè)動(dòng)畫。首次嘗試為每個(gè)動(dòng)畫創(chuàng)建多個(gè)動(dòng)畫循環(huán)，在早期的瀏覽器中使用setTimeout()來創(chuàng)建多個(gè)動(dòng)畫是有點(diǎn)復(fù)雜的，所以開發(fā)商開始使用setInterval()一創(chuàng)建單一的動(dòng)畫循環(huán)，來管理頁面上所有的動(dòng)畫，一個(gè)使用wetInterval()的基本動(dòng)畫像這樣:

(function(){ 
 function updateAnimations(){ 
 updateText(); 
 updateProgress(); 
 } 
 setInterval(updateAnimations, 100); 
})();

創(chuàng)建一個(gè)小動(dòng)畫庫，updateAnimations（）方法將每一個(gè)動(dòng)畫(同時(shí)看到一個(gè)新聞股票和進(jìn)度條在一起運(yùn)行)循環(huán)執(zhí)行并進(jìn)行適當(dāng)?shù)母淖?。如果沒有動(dòng)畫需要更新，該方法可以退出而不做任何事情，甚至停止動(dòng)畫循環(huán)，直到有更多的動(dòng)畫更新做好準(zhǔn)備。
動(dòng)畫問題比較棘手的問題是延遲應(yīng)該為多少。間隔一方面必須足夠短，從而使不同的動(dòng)畫都能流暢的進(jìn)行，別一方面還要足夠長，使得瀏覽器可以完成渲染。大多數(shù)瀏覽器的刷新頻率為60HZ，即每秒60次刷新，大多數(shù)瀏覽器的刷新頻率都不會(huì)比這個(gè)更頻繁，因?yàn)樗麄冎?，最終用戶是得不到更好的體驗(yàn)的。
鑒于此，為流暢動(dòng)畫的最佳時(shí)間間隔為1000毫秒/ 60，約17ms。在這個(gè)頻率你會(huì)看到流暢的動(dòng)畫，那是因?yàn)槟阕畲蟮慕咏藶g覽器能達(dá)到的頻率。跟以前的動(dòng)畫相比，你會(huì)發(fā)現(xiàn)17ms間隔的動(dòng)畫更加平滑，也更快（因?yàn)閯?dòng)畫更新更頻繁，沒有做其他任何修改的情況下），多個(gè)動(dòng)畫可能需要節(jié)流，以免17ms的動(dòng)畫完成得太快。
問題
即使使用setInterval()為基礎(chǔ)的動(dòng)畫循環(huán)比多套使用setTimeout()的動(dòng)畫循環(huán)高效，這里還是存在問題。無論是setInterval()還是setTimeout()都無法達(dá)到精確，這個(gè)延遲即你指定的第二個(gè)參數(shù)僅僅表示何時(shí)代碼會(huì)添加到瀏覽器的可能被執(zhí)行的UI線程隊(duì)列中。如果隊(duì)列中有其他工作在此之前，那代碼將會(huì)等到他完成才會(huì)執(zhí)行。簡而言之，毫秒級(jí)的延遲不是表示何時(shí)代碼會(huì)執(zhí)行，而是表示何時(shí)代碼會(huì)添加進(jìn)隊(duì)列。如果UI線程處于繁忙狀態(tài)或在處理用戶動(dòng)作，那么代碼將不會(huì)被馬上執(zhí)行。
平滑動(dòng)畫的關(guān)鍵是理解下一幀何時(shí)被執(zhí)行，直到現(xiàn)在都沒有一個(gè)方法來保證下一幀將會(huì)在瀏覽器中被繪制。隨著的日益流行和新的基于瀏覽器的游戲的出現(xiàn)，開發(fā)商對(duì)setInterval()和setTimeout()的不精準(zhǔn)越來越感到失望。
瀏覽器的計(jì)時(shí)器分辨率加劇了這個(gè)問題，計(jì)時(shí)器對(duì)毫秒不精準(zhǔn)，這里有一些常見的計(jì)時(shí)器分辨率：
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的計(jì)時(shí)器分辨率改進(jìn)為4ms，但涉及到動(dòng)畫時(shí)也是不具體的，chrome的計(jì)時(shí)器分辨率為4ms，firefox 和 safari的為10ms。因此即使你把間隔設(shè)定為最佳的顯示效果，你也僅僅是得到這個(gè)近似值。
mozRequestAnimationFrame
Mozilla 的 Robert O'Callahan 在思考這個(gè)問題，并想出了一個(gè)獨(dú)特的方案。他指出CSS transitions 和 animations的優(yōu)勢在于瀏覽器知道哪些動(dòng)畫將會(huì)發(fā)生，所以得到正確的間隔來刷新UI。而javascript動(dòng)畫，瀏覽器不知道動(dòng)畫正在發(fā)生。他的解決方案是創(chuàng)建一個(gè)mozRequestAnimationFrame()方法來告訴瀏覽器哪些javascript代碼正在執(zhí)行，這使得瀏覽在執(zhí)行一些代碼后得到優(yōu)化。
mozRequestAnimationFrame()方法接受一個(gè)參數(shù)，是一個(gè)屏幕重繪前被調(diào)用的函數(shù)。這個(gè)函數(shù)用來對(duì)生成下合適的dom樣式的改變，這些改變用在下一次重繪中。你可以像調(diào)用setTimeout()一樣的方式鏈?zhǔn)秸{(diào)用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()只運(yùn)行給定的函數(shù)一次，你需要在下一次UI動(dòng)畫的時(shí)候再次調(diào)用它。你也需要相同的方法來管理何時(shí)停止調(diào)用。很酷，是非常流暢的動(dòng)畫增強(qiáng)的實(shí)例。
因此，mozRequestAnimationFrame()解決了瀏覽器不知道Javascript動(dòng)畫正在執(zhí)行和不知道多少才是合適的間隔的問題，但對(duì)于不知道何時(shí)你的代碼才被真正執(zhí)行，也是由這個(gè)方案來解決的。
傳遞給mozRequestAnimationFrame()的函數(shù)實(shí)際是一個(gè)下一次重繪何時(shí)發(fā)生的的時(shí)間碼（以毫秒為單位自1970年1月1日計(jì)算）。這是很重要的一點(diǎn)：mozRequestAnimationFrame()實(shí)際上列表出將要重繪的點(diǎn)并可以告訴你他們所處的時(shí)間。這樣你就能夠決定怎樣更好的來調(diào)整你的動(dòng)畫。
為了得到上次重繪過去的時(shí)間，你可以查詢mozAnimationStartTime，其中包含了過去重繪的時(shí)間代碼。減去傳遞回調(diào)時(shí)的這個(gè)值可以計(jì)算出下一次重繪到屏幕時(shí)所用的時(shí)間。使用這些值的典型模式如下:

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); 

關(guān)鍵是第一次不是通過callback調(diào)用時(shí)，mozAnimationStartTime是到mozRequestAnimationFrame()經(jīng)過的時(shí)間。如果是在回調(diào)函數(shù)中，mozAnimationStartTime是通過參數(shù)傳遞進(jìn)來的時(shí)間代碼平均值。
webkitRequestAnimationFrame
在很多人熱忠于chrome時(shí)，隨即創(chuàng)建了webkitRequestAnimationFrame()方法。這個(gè)版本與firefox的版本在兩方面有著細(xì)微的差別。一方面，它不通過回調(diào)函數(shù)傳遞時(shí)間代碼，你將無法知道下次重繪何時(shí)發(fā)生，另一方面，它添加了第二個(gè)可選參數(shù)來確定哪一個(gè)DOM元素發(fā)生改變。因此，如果你知道重繪發(fā)生在頁面哪個(gè)部分的元素內(nèi)，你可以限制重繪發(fā)生的區(qū)域。
應(yīng)該不會(huì)感到驚訝，有沒有相應(yīng)的mozAnimationStartTime，因?yàn)槿绻麤]有下一個(gè)重繪的時(shí)間信息不是很有益。有，只是webkitCancelAnimationFrame()取消了之前計(jì)劃的重繪。
如果你不需要精確的時(shí)間差異，你可以用下面的方式來創(chuàng)建一個(gè)用于Firefox4和chrome10+的動(dòng)畫:

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); 

這種模式使用可用的方法來創(chuàng)建以花費(fèi)多少時(shí)間為理念的循環(huán)動(dòng)畫。Firefox使用時(shí)間代碼信息是有用的，而Chrome默認(rèn)為欠精準(zhǔn)的時(shí)間對(duì)象。當(dāng)用這種模式的時(shí)候，時(shí)間的差異給你一種多少時(shí)間過去了的想法，但不會(huì)告訴你Chrome的下一次重繪出現(xiàn)在何時(shí)。不過這比只有多少時(shí)間過去了的模糊概念要好些。
總結(jié)
mozRequestAnimationFrame()方法的介紹為推動(dòng)Javascript 動(dòng)畫及web的歷史發(fā)展有著非常重要的作用。如前所述，JavaScript動(dòng)畫的態(tài)幾乎和JavaScript的初期一樣。隨著瀏覽器逐漸推出CSS transitions 和 animations，很高興看到基于JavaScript的動(dòng)畫的關(guān)注，因?yàn)檫@些在基于的游戲領(lǐng)域?qū)⒆兊酶匾透cCUP聯(lián)系緊密。知道Javascript何時(shí)嘗試動(dòng)畫，允許瀏覽器做更多的優(yōu)化處理，包括在tab處于后臺(tái)或移動(dòng)設(shè)備電量過低時(shí)停止進(jìn)程。
該requestAnimationFrame（）API現(xiàn)在正由W3C起草一個(gè)新議案，并正由Mozilla和Google努力使之成為Web大舞臺(tái)的一部分。很高興能看到這兩大集團(tuán)這么迅速的兼容（可能不完全）實(shí)現(xiàn)。
RequestAnimFrame使用
對(duì)于一個(gè)偵中對(duì)DOM的所有操作，只進(jìn)行一次Layout和Paint。
如果發(fā)生動(dòng)畫的元素被隱藏了，那么就不再去Paint。

window.requestAnimFrame = (function(){ 
 return window.requestAnimationFrame || 
 window.webkitRequestAnimationFrame || 
 window.mozRequestAnimationFrame || 
 window.oRequestAnimationFrame || 
 window.msRequestAnimationFrame || 
 function( callback ){ 
  window.setTimeout(callback, 1000/60); 
 }; 
})(); 
//調(diào)用 
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實(shí)現(xiàn)js動(dòng)畫性能好，希望大家喜歡。

最新評(píng)論