requestAnimationFrame 優化Web動畫

就終極目的來講，requestAnimationFrame就是setTimeout。既然有了setTimeout，那還要requestAnimationFrame來幹嗎。setTimeout會存在過分繪製，會形成幀丟失，繼而致使動畫斷續顯示。這也是setTimeout的定時器值推薦最小使用16.7ms的緣由（16.7 = 1000 / 60, 即每秒60幀）。

瀏覽器能夠優化並行的動畫動做，更合理的從新排列動做序列，並把可以合併的動做放在一個渲染週期內完成，從而呈現出更流暢的動畫效果。requestAnimationFrame就是爲了這個而出現的。我所作的事情很簡單，跟着瀏覽器的繪製走，若是瀏覽設備繪製間隔是16.7ms，那我就這個間隔繪製；若是瀏覽設備繪製間隔是10ms, 我就10ms繪製。這樣就不會存在過分繪製的問題，動畫不會掉幀。經過requestAnimationFrame()，JS動畫可以和CSS動畫/變換或SVG SMIL動畫同步發生。另外，若是在一個瀏覽器標籤頁裏運行一個動畫，當這個標籤頁不可見時，瀏覽器會暫停它，這會減小CPU，內存的壓力，節省電池電量。

requestAnimationFrame的用法

爲了更好的兼容各類瀏覽器，加上了兼容各類瀏覽器引擎前綴。谷歌瀏覽器，火狐瀏覽器，IE10+都實現了這個函數，即便在ie9如下，執行requestAnimationFrame方法也不會出錯。

(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'] ||    // name has changed in 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);
        };
    }
}());

window.requestAnimationFrame(function(/* time */ time){
  // time ~= +new Date // the unix time
});

參考文章
http://www.zhangxinxu.com/wor...
http://www.webhek.com/request...
http://blog.chinaunix.net/uid...