如何監控前端頁面FPS

王玲波_柏林發表於2018-12-21
前端

監控頁面FPS

喜歡玩遊戲的都知道FPS，FPS的概念來源就是遊戲和視訊，也就是每秒的幀數。打了幾十年的遊戲深受FPS困擾啊，MMP的一點都不流暢太特麼卡了啊... 回正題，在頁面上，FPS是頁面內容渲染時的幀率，FPS越低頁面也就越卡。作為3年+的前端開發工作者，今天說說我在工作中是怎麼監控FPS的。

先打幾個炮：

  • chrome
  • performance
  • rendering
  • FPS meter
  • requestAnimationFrame

在開發階段，我們如何檢視頁面的FPS？

1、首先呢開啟chrome開發者工具-performance，可以看到reload button，click it!

如何監控前端頁面FPS

2、等待載入完畢，你就可以看到下圖的各維度的分析結果，今天這不是重點，有興趣的自己去了解吧

如何監控前端頁面FPS

3、點選左上角工具欄，找到More tools中的rendering，勾選上FPS meter

如何監控前端頁面FPS
如何監控前端頁面FPS
如何監控前端頁面FPS

那麼，在生產環境下，我們如何監控FPS呢？

這時候肯定會有人疑惑，為什麼要去監控？作為前端開發者，我們必須重視使用者體驗，平日裡自己玩遊戲也好看視訊也罷還有接觸各種頁面，網路良好的情況下''頁面卡"不難受麼？

收！回來看頁面FPS，rendering顯示0-60，即60為最佳，也就是16.5ms左右渲染一次，那麼我們就有了如下的思路：

FPS採集方案引用淘寶前端團隊的《無線效能優化：FPS 測試》

let lastTime = performance.now()
let frame = 0
let lastFameTime = performance.now()
const loop = time => {
  let now =  performance.now()
  let fs = (now - lastFameTime)
  lastFameTime = now
  let fps = Math.round(1000 / fs)
  frame++
  if (now > 1000 + lastTime) {
    fps = Math.round(( frame * 1000 ) / ( now - lastTime ))
    frame = 0
    lastTime = now
  }     
  window.requestAnimationFrame(loop)
}
複製程式碼

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

通過這種方式，結合我們自定義的卡頓標準（我是按連續3個低於20FPS），通過以下程式碼判斷FPS資料的卡頓，最終上報統計資料（此處僅提供判斷卡頓程式碼）

/**
 * @function isLowFPS
 * @param | FPSList 採集的FPS值
 * @param | below FPS卡頓的限定值
 * @param | number below個數
 */
const isLowFPS = (FPSList, below, number) => {
  let count = 0
  for(let i = 0; i < FPSList.length; i++) {
    if (FPSList[i] < below) {
      count++
    } else {
      count = 0
    }
    if (count >= number) {
      return true
    }
  }
  return false
}
複製程式碼

相關文章