如何监控前端页面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
}
复制代码