如何監控網頁的卡頓？

要監控網頁的卡頓，我們必須從FPS 說起。

FPS 是來自視頻或者遊戲裡的概念，即是每秒的幀數，代表視頻或者遊戲的流暢度，俗話說，就是“不卡”。

那在前端開發領域，網頁的FPS 是什麼呢？

什麼是網頁的FPS？

網頁內容在不斷變化之中，網頁的FPS 是只瀏覽器在渲染這些變化時的幀率。幀率越高，用戶感覺網頁越流暢，反之則會感覺卡頓。

在Chrome中可以通過開發者工具查看網頁的FPS ：

注意，網頁不是隨時都需要，該工具看到的是每次更新是FPS值。

最優的幀率是60，即16.5ms 左右渲染一次。

通過Chrome 或者Firfox 等的性能工具也可以查看瀏覽器的幀率：

綠色的直方圖即代表在頁面重新繪製時的幀率，Frames為每一幀渲染所花的時間。

另外一種給出網頁FPS 的方式

FPS extension是Chrome的一個擴展，可以顯示當前網頁的FPS值，即頁面是否卡頓。

這種工具獲取頁面FPS的方式與瀏覽器自身給出的方式不同，沒有採用瀏覽器原生的API（正在製定），這類工具獨闢蹊徑，通過瀏覽器的requestAnimationFrame API （可以使用setInterval polyfill）來實現。

代碼類似：

varlastTime=performance.now();varframe=0;varlastFameTime=performance.now();varloop=function(time){varnow=performance.now();varfs=(now-lastFameTime);lastFameTime=now;varfps=Math.round(1000/fs);frame++;if(now>1000+lastTime){varfps=Math.round((frame*1000)/(now-lastTime));frame=0;lastTime=now;};window.requestAnimationFrame(loop);}

代碼摘自淘寶前端團隊的《無線性能優化：FPS測試》。

通俗地解釋就是，通過requestAnimationFrame API 來定時執行一些JS 代碼，如果瀏覽器卡頓，無法很好地保證渲染的頻率，1s 中frame 無法達到60 幀，即可間接地反映瀏覽器的渲染幀率。關於requestAnimationFrame API的細節，可以參看MDN上的文檔。