動畫requestAnimationFrame前言定時器requestAnimationFrame比較相容處理對比

在研究canvas的2D pixi.js庫的時候，其動畫的重新整理都用requestAnimationFrame替代了setTimeout 或 setInterval

但是jQuery中還是采用了setInterval，我這章就研究下順便改造下jQuery的動畫

<a></a>

jQuery動畫的實作考慮到相容與易用性采用了setInterval來不斷繪制新的屬性值，進而達到動畫的效果。

大部分浏覽器的顯示頻率是<code>16.7ms，由于浏覽器的特性，setInterval會有一個丢幀的問題</code>

<code>即使向其傳遞毫秒為機關的參數，它們也不能達到ms的準确性。這是因為javascript是單線程的，可能會發生阻塞</code>

<code>jQuery會有一個全局設定jQuery.fx.interval = 13 </code>設定動畫每秒運作幀數。

預設是13毫秒。該屬性值越小，在速度較快的浏覽器中（例如，Chrome），動畫執行的越流暢，但是會影響程式的性能并且占用更多的 CPU 資源

那麼歸納一點最關鍵的問題：

requestAnimationFrame 是專門為實作高性能的幀動畫而設計的一個API

說簡單點

setInterval、setTimeout是開發者主動要求浏覽器去繪制，但是由于種種問題，浏覽器可能會漏掉部分指令

requestAnimationFrame 就是浏覽器什麼要開始繪制了浏覽器自己知道，通過requestAnimationFrame 告訴開發者，這樣就不會出現重複繪制丢失的問題了

目前已在多個浏覽器得到了支援，包括IE10+，Firefox，Chrome，Safari，Opera等，在移動裝置上，ios6以上版本以及IE mobile 10以上也支援requestAnimationFrame，

唯一比較遺憾的是目前安卓上的原生浏覽器并不支援requestAnimationFrame，不過對requestAnimationFrame的支援應該是大勢所趨了，安卓版本的chrome 16+也是支援requestAnimationFrame的。

差別：

requestAnimationFrame 會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成，并且重繪或回流的時間間隔緊緊跟随浏覽器的重新整理頻率，一般來說，這個頻率為每秒60幀

隐藏或不可見的元素中，requestAnimationFrame将不會進行重繪或回流，這當然就意味着更少的的cpu，gpu和記憶體使用量。

requestAnimationFrame也會像setTimeout一樣有一個傳回值ID用于取消，可以把它作為參數傳入cancelAnimationFrame函數來取消requestAnimationFrame的回調

摘自HTML5 Canvas 核心技術

通過requestAnimationFrame與setInterval同樣的效果對比

一段動畫采用setInterval與requestAnimationFrame，分别給出了webKit下調用重新整理的次數

setInterval實作，調用了144次左右

requestAnimationFrame 實作調用了120次左右

通過對比，在同樣的時間裡，通過定時器重新整理的次數是要更多，當然定時器跟設定的時間是有關系的

這裡我要強調一點，有效值，就是我們在浏覽器能接受的範圍内，給出一個最佳的渲染時間，這樣才是一個性能優化的最佳的選擇

本文轉自艾倫 Aaron部落格園部落格，原文連結：http://www.cnblogs.com/aaronjs/p/4283109.html，如需轉載請自行聯系原作者