如何監控網頁的卡頓?

如何監控網頁的卡頓?

來自專欄前端外刊評論

要監控網頁的卡頓,我們必須從 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)來實現。

代碼類似:

var lastTime = performance.now();var frame = 0;var lastFameTime = performance.now();var loop = function(time) { var now = performance.now(); var fs = (now - lastFameTime); lastFameTime = now; var fps = Math.round(1000/fs); frame++; if (now > 1000 + lastTime) { var fps = Math.round( ( frame * 1000 ) / ( now - lastTime ) ); frame = 0; lastTime = now; }; window.requestAnimationFrame(loop); }

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

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

如何監控網頁的卡頓?

首先為什麼要監控?比如在全民直播,我們必須重視用戶在觀看視頻的體驗,任何網頁或者播放器的卡頓都會讓用戶抓狂。所以必須監控起來,以此來指導優化。

最後,回到本文的主題,如何監控網頁的卡頓呢?

以全民直播的方式為例,使用 FPS extension 類似的方式,每秒中計算一次網頁的 FPS 值,獲得一列數據:

...6,8,11,29,60,58,46,57,57,57,44,59,51,54,0,31,58,56,41,52,51,17,22, 34,51,48,26,26,49,59,59,59,59,52,52,0,45,58,60,59,60,21...

然後通過通用的日誌通道上報到大數據平台進行分析即可。

那如何通過 FPS 確定網頁存在卡頓呢?按照我們對卡頓的觀察,連續出現3個低於20的 FPS 即可認為網頁存在卡頓。

function isBlocking(fpsList, below=20, last=3) { var count = 0 for(var i = 0; i < fpsList.length; i++) { if (fpsList[i] && fpsList[i] < below) { count++; } else { count = 0 } if (count >= last) { return true } } return false}

當然這只是一種經驗,但可以作為相對的度量。

通過這種方式,我們得到了網頁卡頓的統計數據:

接下來,就可以針對卡頓的問題,在有數據支持的情況下進行優化我們的網頁了!


給大家推薦個活躍的開發者社區:掘金是面向程序員的的技術社區,從大廠技術分享到前端開發開發最佳實踐,來掘金你不會錯過任何一個技術乾貨。

前端 - 掘金 - juejin.im - 一個幫助開發者成長的社區?

juejin.im


推薦閱讀:

web前端:如何(安全地)使用Vue.js的jQuery插件
一看就暈的React事件機制
[閱 #40] 幾點關於更好書寫 CSS 選擇器的建議
React v16.3.0 發布
面向前端的 Lottie & AE 動畫手把手入門教學

TAG:監控 | 科技 | 前端開發 |