在Web應(yīng)用中，實(shí)現(xiàn)動(dòng)畫效果的方法比較多，Javascript 中可以通過定時(shí)器 setTimeout來實(shí)現(xiàn)，css3 可以使用transition和 animation 來實(shí)現(xiàn)，html5中的 canvas也可以實(shí)現(xiàn)。除此之外，html5 還提供一個(gè)專門用于請(qǐng)求動(dòng)畫的API，那就是 requestAnimationFrame，顧名思義就是請(qǐng)求動(dòng)畫幀。

為了理解requestAnimationFrame背后的原理，我們首先需要了解一下與之相關(guān)的幾個(gè)概念：

• 頁面可見
  當(dāng)頁面被最小化或者被切換成后臺(tái)標(biāo)簽頁時(shí)，頁面為不可見，瀏覽器會(huì)觸發(fā)一個(gè) visibilitychange事件,并設(shè)置document.hidden屬性為true；切換到顯示狀態(tài)時(shí)，頁面為可見，也同樣觸發(fā)一個(gè)visibilitychange事件，設(shè)置document.hidden屬性為false。

• 動(dòng)畫幀請(qǐng)求回調(diào)函數(shù)列表

每個(gè)Document都有一個(gè)動(dòng)畫幀請(qǐng)求回調(diào)函數(shù)列表，該列表可以看成是由<handlerId, callback>元組組成的集合。其中handlerId是一個(gè)整數(shù)，唯一地標(biāo)識(shí)了元組在列表中的位置；callback是回調(diào)函數(shù)。

• 屏幕刷新頻率
  即圖像在屏幕上更新的速度，也即屏幕上的圖像每秒鐘出現(xiàn)的次數(shù)，它的單位是赫茲(Hz)。 對(duì)于一般筆記本電腦，這個(gè)頻率大概是60Hz， 這個(gè)值的設(shè)定受屏幕分辨率、屏幕尺寸和顯卡的影響。

• 動(dòng)畫原理
  根據(jù)上面的原理我們知道，你眼前所看到圖像正在以每秒60次的頻率刷新，由于刷新頻率很高，因此你感覺不到它在刷新。而動(dòng)畫本質(zhì)就是要讓人眼看到圖像被刷新而引起變化的視覺效果，這個(gè)變化要以連貫的、平滑的方式進(jìn)行過渡。 那怎么樣才能做到這種效果呢？ 刷新頻率為60Hz的屏幕每16.7ms刷新一次，我們?cè)谄聊幻看嗡⑿虑埃瑢D像的位置向左移動(dòng)一個(gè)像素，即1px。這樣一來，屏幕每次刷出來的圖像位置都比前一個(gè)要差1px，因此你會(huì)看到圖像在移動(dòng)；由于我們?nèi)搜鄣囊曈X停留效應(yīng)，當(dāng)前位置的圖像停留在大腦的印象還沒消失，緊接著圖像又被移到了下一個(gè)位置，因此你才會(huì)看到圖像在流暢的移動(dòng)，這就是視覺效果上形成的動(dòng)畫。

setTimeout與requestAnimationFrame

1、setTimeout

理解了上面的概念以后，我們不難發(fā)現(xiàn)，setTimeout 其實(shí)就是通過設(shè)置一個(gè)間隔時(shí)間來不斷的改變圖像的位置，從而達(dá)到動(dòng)畫效果的。但利用seTimeout實(shí)現(xiàn)的動(dòng)畫在某些低端機(jī)上會(huì)出現(xiàn)卡頓、抖動(dòng)的現(xiàn)象。 這種現(xiàn)象的產(chǎn)生有兩個(gè)原因：

setTimeout的執(zhí)行時(shí)間并不是確定的。在Javascript中， setTimeout任務(wù)被放進(jìn)了異步隊(duì)列中，只有當(dāng)主線程上的任務(wù)執(zhí)行完以后，才會(huì)去檢查該隊(duì)列里的任務(wù)是否需要開始執(zhí)行，因此 setTimeout的實(shí)際執(zhí)行時(shí)間一般要比其設(shè)定的時(shí)間晚一些。

刷新頻率受屏幕分辨率和屏幕尺寸的影響，因此不同設(shè)備的屏幕刷新頻率可能會(huì)不同，而 setTimeout只能設(shè)置一個(gè)固定的時(shí)間間隔，這個(gè)時(shí)間不一定和屏幕的刷新時(shí)間相同。

以上兩種情況都會(huì)導(dǎo)致setTimeout的執(zhí)行步調(diào)和屏幕的刷新步調(diào)不一致，從而引起丟幀現(xiàn)象。 那為什么步調(diào)不一致就會(huì)引起丟幀呢？

首先要明白，setTimeout的執(zhí)行只是在內(nèi)存中對(duì)圖像屬性進(jìn)行改變，這個(gè)變化必須要等到屏幕下次刷新時(shí)才會(huì)被更新到屏幕上。如果兩者的步調(diào)不一致，就可能會(huì)導(dǎo)致中間某一幀的操作被跨越過去，而直接更新下一幀的圖像。假設(shè)屏幕每隔16.7ms刷新一次，而setTimeout每隔10ms設(shè)置圖像向左移動(dòng)1px， 就會(huì)出現(xiàn)如下繪制過程：
第0ms: 屏幕未刷新，等待中，setTimeout也未執(zhí)行，等待中；
第10ms: 屏幕未刷新，等待中，setTimeout開始執(zhí)行并設(shè)置圖像屬性left=1px；
第16.7ms: 屏幕開始刷新，屏幕上的圖像向左移動(dòng)了1px， setTimeout 未執(zhí)行，繼續(xù)等待中；
第20ms: 屏幕未刷新，等待中，setTimeout開始執(zhí)行并設(shè)置left=2px;
第30ms: 屏幕未刷新，等待中，setTimeout開始執(zhí)行并設(shè)置left=3px;
第33.4ms: 屏幕開始刷新，屏幕上的圖像向左移動(dòng)了3px， setTimeout未執(zhí)行，繼續(xù)等待中；

從上面的繪制過程中可以看出，屏幕沒有更新left=2px的那一幀畫面，圖像直接從1px的位置跳到了3px的的位置，這就是丟幀現(xiàn)象，這種現(xiàn)象就會(huì)引起動(dòng)畫卡頓。

2. requestAnimationFrame

與setTimeout相比，requestAnimationFrame最大的優(yōu)勢是由系統(tǒng)來決定回調(diào)函數(shù)的執(zhí)行時(shí)機(jī)。具體一點(diǎn)講，如果屏幕刷新率是60Hz,那么回調(diào)函數(shù)就每16.7ms被執(zhí)行一次，如果刷新率是75Hz，那么這個(gè)時(shí)間間隔就變成了1000/75=13.3ms，換句話說就是，requestAnimationFrame的步伐跟著系統(tǒng)的刷新步伐走。它能保證回調(diào)函數(shù)在屏幕每一次的刷新間隔中只被執(zhí)行一次，這樣就不會(huì)引起丟幀現(xiàn)象，也不會(huì)導(dǎo)致動(dòng)畫出現(xiàn)卡頓的問題。
這個(gè)API的調(diào)用很簡單，如下所示：

var progress = 0;
//回調(diào)函數(shù)
function render() {  
  progress += 1; //修改圖像的位置  
  if (progress < 100) {  //在動(dòng)畫沒有結(jié)束前，遞歸渲染    
    window.requestAnimationFrame(render); 
  }
}
//第一幀渲染
window.requestAnimationFrame(render);

除此之外，requestAnimationFrame還有以下兩個(gè)優(yōu)勢：

CPU節(jié)能：使用setTimeout實(shí)現(xiàn)的動(dòng)畫，當(dāng)頁面被隱藏或最小化時(shí)，setTimeout仍然在后臺(tái)執(zhí)行動(dòng)畫任務(wù)，由于此時(shí)頁面處于不可見或不可用狀態(tài)，刷新動(dòng)畫是沒有意義的，完全是浪費(fèi)CPU資源。而requestAnimationFrame則完全不同，當(dāng)頁面處理未激活的狀態(tài)下，該頁面的屏幕刷新任務(wù)也會(huì)被系統(tǒng)暫停，因此跟著系統(tǒng)步伐走的requestAnimationFrame也會(huì)停止渲染，當(dāng)頁面被激活時(shí)，動(dòng)畫就從上次停留的地方繼續(xù)執(zhí)行，有效節(jié)省了CPU開銷。

函數(shù)節(jié)流：在高頻率事件(resize,scroll等)中，為了防止在一個(gè)刷新間隔內(nèi)發(fā)生多次函數(shù)執(zhí)行，使用requestAnimationFrame可保證每個(gè)刷新間隔內(nèi)，函數(shù)只被執(zhí)行一次，這樣既能保證流暢性，也能更好的節(jié)省函數(shù)執(zhí)行的開銷。一個(gè)刷新間隔內(nèi)函數(shù)執(zhí)行多次時(shí)沒有意義的，因?yàn)轱@示器每16.7ms刷新一次，多次繪制并不會(huì)在屏幕上體現(xiàn)出來。

轉(zhuǎn)載：https://www.jianshu.com/p/3a3840f90b37