讀這篇文章，終于讓我對頁面中幀的概念有了更清晰的了解。
幀與FPS的概念
要了解幀，首先要知道屏幕的成像原理。
屏幕的成像，簡單來講就是像幻燈片一樣，通過快速地切換一張張圖片，速度快到你看不到圖片在切換，利用人的眼睛的視覺停留效應(yīng)，因為人腦可以記住上一張出現(xiàn)過的圖，所以讓畫面可以看起來是連續(xù)的。
一個畫面如果要人眼感覺到流暢，需要達到60FPS，60FPS是什么概念？就是電腦要在1秒內(nèi)切換60張圖，專業(yè)點講，就是1秒鐘切換60幀。FPS就是用來描述“每秒切換多少幀”的單位，又叫刷新率。
即使你的電腦屏幕上沒有什么動畫出現(xiàn)，就這樣待機著，你的屏幕也是在以超高的頻率做刷新。
網(wǎng)頁內(nèi)動畫元素的繪制是由瀏覽器完成的，為了實現(xiàn)60FPS的刷新率，意味著刷新一幀只能使用16.6ms，這16.6ms瀏覽器還要完成樣式計算，布局，繪制，合成等操作，留給JS執(zhí)行代碼的時間只有10ms。
指標
當頁面的響應(yīng)，動畫，空閑和加載的時間都在關(guān)鍵指標內(nèi)，用戶訪問這個頁面的感覺就是絲滑的。
像素管道
當頁面樣式發(fā)生變動時，瀏覽器在正常情況下會按照以下的順序?qū)撁孢M行處理：
JS觸發(fā)樣式改變=》瀏覽器布局=》繪制=》合成
如果是不會觸發(fā)重排的樣式改變，則Layout不會被執(zhí)行。純CSS樣式的改變不會由JS觸發(fā)。
性能測量工具
提供了demo嘗試F12的performance，知道了FSL（強制同步渲染）。發(fā)生的場景往往是用JS改變了樣式后，馬上去獲取改變后的元素樣式，導(dǎo)致瀏覽器要提前繪制出來，就為了告訴你元素的具體樣式值。
requestAnimationFrame
之前不知道這個方法好在哪?？戳诉@篇文章才知道，在requestAnimationFrame里的函數(shù)，會在每一幀的最開始執(zhí)行。這樣，如果你在動畫是在16.6ms內(nèi)可以執(zhí)行完的話，就可以在一幀里完美地繪制出來。使用setTimeout或者setInterval，動畫可能會在16.6ms的中間或者快結(jié)束的時候才執(zhí)行，就可能出現(xiàn)掉幀的情況。當然，即使是使用requestAnimationFrame，如果動畫的時間太久，也會導(dǎo)致掉幀。
參考資料：
讓你的網(wǎng)頁更絲滑（一）
刷新頻率_百度百科
FPS（每秒傳輸幀數(shù)(Frames Per Second)）_百度百科
