參考
requestAnimationFrame簡介
requestAnimationFrame，Web中寫動畫的另一種選擇
CSS3動畫那么強祠汇，requestAnimationFrame還有毛線用盖袭？
當我們寫window.requestAnimationFrame(回調(diào)函數(shù))時失暂，瀏覽器會在下次重繪前執(zhí)行回調(diào)函數(shù)。我們可以用它來做連貫的逐幀動畫鳄虱。例如：
function render(){
// 一些更新界面的操作
requestAnimationFrame(render);
}
render();
在沒有requestAnimationFrame方法之前弟塞，我們只能用setTimeout或setInterval來實現(xiàn)類似的效果
function render(){
// 一些更新界面的操作
setTimeout(render, 1000/60);// 一般瀏覽器是每秒60幀
}
render();
這樣寫的存在的問題是：如果瀏覽器不是每秒60幀，會造成掉幀拙已。還有决记，在性能方面，大部分在瀏覽器在標簽頁/窗口處于的時候非激活狀態(tài)（如窗口最小化或標簽頁切換了）時倍踪，requestAnimationFrame是不會被執(zhí)行的系宫，而setTimeout/setInterval 會。
以下參考CSS3動畫那么強建车，requestAnimationFrame還有毛線用扩借？
國慶北京高速，最多每16.7s通過一輛車缤至，結(jié)果潮罪，突然插入一批setTimeout的軍車，強行要10s通過领斥。顯然嫉到，這是超負荷的，要想順利進行月洛，只能讓第三輛車直接消失（正如顯示繪制第三幀的丟失）何恶。然，這是不現(xiàn)實的膊存，于是就有了會堵車导而！
同樣的忱叭，顯示器16.7ms刷新間隔之前發(fā)生了其他繪制請求(setTimeout)隔崎，導致所有第三幀丟失，繼而導致動畫斷續(xù)顯示（堵車的感覺）韵丑，這就是過度繪制帶來的問題爵卒。不僅如此，這種計時器頻率的降低也會對電池使用壽命造成負面影響撵彻，并會降低其他應用的性能钓株。
這也是為何setTimeout的定時器值推薦最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60幀）实牡。
而我requestAnimationFrame就是為了這個而出現(xiàn)的。我所做的事情很簡單轴合，跟著瀏覽器的繪制走创坞，如果瀏覽設(shè)備繪制間隔是16.7ms，那我就這個間隔繪制受葛；如果瀏覽設(shè)備繪制間隔是10ms, 我就10ms繪制题涨。這樣就不會存在過度繪制的問題，動畫不會掉幀总滩，自然流暢的說~~
