如何監控前端頁面FPS

監控頁面FPS

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

先打幾個炮：

• chrome
• performance
• rendering
• FPS meter
• requestAnimationFrame

在開發階段，咱們如何查看頁面的FPS？

一、首先呢打開chrome開發者工具-performance，能夠看到reload button，click it!

二、等待加載完畢，你就能夠看到下圖的各維度的分析結果，今天這不是重點，有興趣的本身去了解吧

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

那麼，在生產環境下，咱們如何監控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
}
複製代碼