{首页主词},&

　　requestAnimationFrame

　　來看一個小例子

<body>

</body>

var box = document.getElementById("box");

function run(){

box.innerHTML = new Date().getTime();

setTimeout(run, 16);

}

setTimeout(run, 16);

</script>

　　這個例子當中, 我們通過setTimeout讓run函數每秒執行60次.

　　想要按照瀏覽器的刷新頻率來執行函數, 其實不需要這么麻煩.

　　另外, 如果瀏覽器的刷新頻率不是60, 甚至低于60, 那么我們的動畫就可能出現掉幀情況.

　　啥叫掉幀?

　　一般情況下, 瀏覽器的幀率跟屏幕幀率一致, 基本都是60, 也就是16ms左右會刷新一次

　　如果, 你的定時器時間過短, 就會出現上圖的現象.

　　在瀏覽器兩次刷新畫面中間, 定時器函數執行了2次

　　而這2次操作都是在內存完成的動作, 瀏覽器只有刷新才能看到效果

　　也就是說, 用戶本該看到的兩幀畫面, 丟了一幀.

　　畫面會顯得不流暢, 甚至一定程度上出現 "卡頓"

　　這就是俗稱的掉幀現象.

　　解決這個問題, 直觀的辦法就是把延遲時間寫的長一點.

　　這里我們引入更簡單的方法

<body>

</body>

var box = document.getElementById("box");

function run(){

box.innerHTML = new Date().getTime();

requestAnimationFrame(run);

}

requestAnimationFrame(run);

</script>

　　requestAnimationFrame 類似于 setTimeout, 只不過它不需要設定延遲時間

　　時間會根據瀏覽器的幀率自動調節. 也就是在瀏覽器下一次刷新前調用這個函數

　　每次刷新前, 調用1次函數, 確保函數的執行頻率跟刷新頻率一致.

　　由于是每一幀畫面執行1次函數, 因此requestAnimationFrame又叫 "幀動畫" 函數，它會帶來兩個好處：

　　1. 避免了計算 1000/60 ≈ 16, 瀏覽器會自動處理

　　2. 當標簽頁運行在后臺的時候, 它會自動暫停運行以節省CPU資源

　　經過我的實際測試, chrome\firefox\360\ie11, 幀率都是60

　　也就是說, 除非你把延遲時間設定的小于 16, 才有可能在理論上出現掉幀

　　又由于setTimeout是異步任務, 所以實際當中的時間間隔往往是大于實際值的

　　因此, 掉幀的情況是很難發生的.

　　所以, requestAnimationFrame方法的主要好處來源于第2條.

　　更多關于 web前端培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。

幀動畫requestAnimationFrame