摘要：方法用于取消先前安排的一個(gè)動(dòng)畫(huà)幀更新的請(qǐng)求。當(dāng)調(diào)用時(shí)，瀏覽器會(huì)設(shè)置該指向的回調(diào)函數(shù)的為。無(wú)論該回調(diào)函數(shù)是否在動(dòng)畫(huà)幀請(qǐng)求回調(diào)函數(shù)列表中，它的都會(huì)被設(shè)置為。

計(jì)時(shí)器一直是JavaScript動(dòng)畫(huà)的核心技術(shù)。而編寫(xiě)動(dòng)畫(huà)循環(huán)的關(guān)鍵是要知道延遲時(shí)間多長(zhǎng)合適。一方面，循環(huán)間隔必須足夠短，這樣才能讓不同的動(dòng)畫(huà)效果顯得平滑流暢；另一方面，循環(huán)間隔還要足夠長(zhǎng)，這樣才能確保瀏覽器有能力渲染產(chǎn)生的變化。

如何保證流暢呢？登登登登....該requestAnimationFrame登場(chǎng)了~~

大多數(shù)電腦顯示器的刷新頻率是60Hz，大概相當(dāng)于每秒鐘重繪60次。大多數(shù)瀏覽器都會(huì)對(duì)重繪操作加以限制，不超過(guò)顯示器的重繪頻率，因?yàn)榧词钩^(guò)那個(gè)頻率用戶體驗(yàn)也不會(huì)有提升。因此，最平滑動(dòng)畫(huà)的最佳循環(huán)間隔是1000ms/60，約等于16.7ms。

同樣的，顯示器16.7ms刷新間隔之前發(fā)生了其他繪制請(qǐng)求(setTimeout)，導(dǎo)致所有第三幀丟失，繼而導(dǎo)致動(dòng)畫(huà)斷續(xù)顯示（堵車(chē)的感覺(jué)），這就是過(guò)度繪制帶來(lái)的問(wèn)題。不僅如此，這種計(jì)時(shí)器頻率的降低也會(huì)對(duì)電池使用壽命造成負(fù)面影響，并會(huì)降低其他應(yīng)用的性能。

這也是為何setTimeout的定時(shí)器值推薦最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60幀）。

1、即使向其傳遞毫秒為單位的參數(shù)，它們也不能達(dá)到ms的準(zhǔn)確性。這是因?yàn)閖avascript是單線程的，可能會(huì)發(fā)生阻塞。
2、沒(méi)有對(duì)調(diào)用動(dòng)畫(huà)的循環(huán)機(jī)制進(jìn)行優(yōu)化。
3、沒(méi)有考慮到繪制動(dòng)畫(huà)的最佳時(shí)機(jī)，只是一味地以某個(gè)大致的事件間隔來(lái)調(diào)用循環(huán)。

requestAnimationFrame不需要使用者指定循環(huán)間隔時(shí)間，瀏覽器會(huì)基于當(dāng)前頁(yè)面是否可見(jiàn)、CPU的負(fù)荷情況等來(lái)自行決定最佳的幀速率，跟著瀏覽器的繪制走，如果瀏覽設(shè)備繪制間隔是16.7ms，那我就這個(gè)間隔繪制；如果瀏覽設(shè)備繪制間隔是10ms, 我就10ms繪制。
這樣自然就合理地使用CPU，不會(huì)存在過(guò)度繪制的問(wèn)題，動(dòng)畫(huà)不會(huì)掉幀，自然流暢的說(shuō)~~

內(nèi)部是這么運(yùn)作的：

瀏覽器（如頁(yè)面）每次重繪，就會(huì)通知我(requestAnimationFrame)：嗨，我要重繪了，你可以跟我一起重繪哦！

這是資源非常高效的一種利用方式。怎么講呢？

1.就算很多元素需要重繪，瀏覽器只要通知一次就可以了。而setTimeout貌似是多個(gè)獨(dú)立繪制。
2.頁(yè)面最小化了，或者被Tab切換關(guān)燈了。頁(yè)面是不會(huì)重繪的，自然，requestAnimationFrame也不會(huì)洗澡的（沒(méi)通知啊）。頁(yè)面繪制全部停止，資源高效利用。

setTimeout和setInterval都不精確。它們的內(nèi)在運(yùn)行機(jī)制決定了時(shí)間間隔參數(shù)實(shí)際上只是指定了把動(dòng)畫(huà)代碼添加到瀏覽器UI線程隊(duì)列中以等待執(zhí)行的時(shí)間。如果隊(duì)列前面已經(jīng)加入了其他任務(wù)，那動(dòng)畫(huà)代碼就要等前面的任務(wù)完成后再執(zhí)行。
requestAnimationFrame采用系統(tǒng)時(shí)間間隔，保持最佳繪制效率，不會(huì)因?yàn)殚g隔時(shí)間過(guò)短，造成過(guò)度繪制，增加開(kāi)銷(xiāo)；也不會(huì)因?yàn)殚g隔時(shí)間太長(zhǎng)，使用動(dòng)畫(huà)卡頓不流暢，讓各種網(wǎng)頁(yè)動(dòng)畫(huà)效果能夠有一個(gè)統(tǒng)一的刷新機(jī)制，從而節(jié)省系統(tǒng)資源，提高系統(tǒng)性能，改善視覺(jué)效果。

requestAnimationFrame會(huì)把每一幀中的所有DOM操作集中起來(lái)，在一次重繪或回流中就完成，并且重繪或回流的時(shí)間間隔緊緊跟隨瀏覽器的刷新頻率

在隱藏或不可見(jiàn)的元素中，requestAnimationFrame將不會(huì)進(jìn)行重繪或回流，這當(dāng)然就意味著更少的CPU、GPU和內(nèi)存使用量

requestAnimationFrame是由瀏覽器專(zhuān)門(mén)為動(dòng)畫(huà)提供的API，在運(yùn)行時(shí)瀏覽器會(huì)自動(dòng)優(yōu)化方法的調(diào)用，并且如果頁(yè)面不是激活狀態(tài)下的話，動(dòng)畫(huà)會(huì)自動(dòng)暫停，有效節(jié)省了CPU開(kāi)銷(xiāo)

Window對(duì)象定義了以下兩個(gè)接口：

partial interface Window {
  long requestAnimationFrame(FrameRequestCallback callback);
  void cancelAnimationFrame(long handle);
};

1.requestAnimationFrame方法用于通知瀏覽器重采樣動(dòng)畫(huà)。

當(dāng)requestAnimationFrame(callback)被調(diào)用時(shí)不會(huì)執(zhí)行callback，而是會(huì)將元組< handle,callback>插入到動(dòng)畫(huà)幀請(qǐng)求回調(diào)函數(shù)列表末尾（其中元組的callback就是傳入requestAnimationFrame的回調(diào)函數(shù)），并且返回handle值，該值為瀏覽器定義的、大于0的整數(shù)，唯一標(biāo)識(shí)了該回調(diào)函數(shù)在列表中位置。

2.每個(gè)回調(diào)函數(shù)都有一個(gè)布爾標(biāo)識(shí)cancelled，該標(biāo)識(shí)初始值為false，并且對(duì)外不可見(jiàn)。
3.在后面的“處理模型” 中我們會(huì)看到，瀏覽器在執(zhí)行“采樣所有動(dòng)畫(huà)”的任務(wù)時(shí)會(huì)遍歷動(dòng)畫(huà)幀請(qǐng)求回調(diào)函數(shù)列表，判斷每個(gè)元組的callback的cancelled，如果為false，則執(zhí)行callback。

1、cancelAnimationFrame 方法用于取消先前安排的一個(gè)動(dòng)畫(huà)幀更新的請(qǐng)求。
2、當(dāng)調(diào)用cancelAnimationFrame(handle)時(shí)，瀏覽器會(huì)設(shè)置該handle指向的回調(diào)函數(shù)的cancelled為true。
無(wú)論該回調(diào)函數(shù)是否在動(dòng)畫(huà)幀請(qǐng)求回調(diào)函數(shù)列表中，它的cancelled都會(huì)被設(shè)置為true。
3.如果該handle沒(méi)有指向任何回調(diào)函數(shù)，則調(diào)用cancelAnimationFrame 不會(huì)發(fā)生任何事情。
4.注意：在requestAnimationFrame的callback內(nèi)部執(zhí)行cancelAnimationFrame不能取消動(dòng)畫(huà)

當(dāng)頁(yè)面可見(jiàn)并且動(dòng)畫(huà)幀請(qǐng)求回調(diào)函數(shù)列表不為空時(shí)，瀏覽器會(huì)定期地加入一個(gè)“采樣所有動(dòng)畫(huà)”的任務(wù)到UI線程的隊(duì)列中。

requestAnimationFrame的用法與setTimeout很相似，只是不需要設(shè)置時(shí)間間隔而已。requestAnimationFrame使用一個(gè)回調(diào)函數(shù)作為參數(shù)，這個(gè)回調(diào)函數(shù)會(huì)在瀏覽器重繪之前調(diào)用。它返回一個(gè)整數(shù)，表示定時(shí)器的編號(hào)，這個(gè)值可以傳遞給cancelAnimationFrame用于取消這個(gè)函數(shù)的執(zhí)行。

requestID = requestAnimationFrame(callback);

如果想要簡(jiǎn)單的兼容，可以這樣子：

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

但是呢，并不是所有設(shè)備的繪制時(shí)間間隔是1000/60 ms, 以及上面并木有cancel相關(guān)方法，所以，就有下面這份更全面的兼容方法：

(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"] ||    // Webkit中此取消方法的名字變了
                                          window[vendors[x] + "CancelRequestAnimationFrame"];
        }
    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16.7 - (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);
        };
    }
}());