在小程序中监控 FPS

网页中的 FPS

什么是 FPS，我相信网上一搜资料一大把。这里就不累赘简述了。网页的 FPS 是指浏览器在渲染这些变化时的帧率。帧率越高，用户感觉网页越流畅，反之则会感觉卡顿。

正常人眼镜在 FPS 小于 30 的时候就会感到卡顿，最优的帧率是 60，即16.5ms 左右渲染一次。

怎么在小程序中监控 FPS

随着小程序的内容越来越多，网页性能会越来越卡，为了能有效的针对某个页面进行优化，所以打算给小程序加个 FPS 的监控。

为什么要特意强调是小程序，那是因为小程序不支持 requestAnimationFrame, 所以我们使用 setInterval 实现。

强调声明下面的方法存在误差，对精度有严格要求的，慎用。

以下思路纯属个人想法，如果大家有其他更好的方法，欢迎讨论。大致思路如下：

首先我们需要明确最优帧率是 60，即 16.5ms。

1. 程序开始，记录当前时间 now
2. 因此我们使用 setInterval 并且设置 17ms 执行一次 (这里使用 17 是给他多点容错)
3. 初始化一个记录 FPS 的变量法 frame，初值为 0
4. 在 setInterval 每过 17ms 让 frame 自增 1
5. 如果时间超过 1 秒，frame 就是咱们要的 FPS 了。就重置 frame = 0，now 等于当前时间。

大致代码如下：

let now = performance.now()
  let frame = 0
  let fpsTimer: NodeJS.Timer | null = null

  // 按照 1 秒 60 帧计算为标准, 当 frame < 30 表示卡顿
  fpsTimer = setInterval(() => {
    const lastTime = performance.now()

    if (lastTime - 1000 > now) {
      now = lastTime
      callback && callback(frame)
      frame = 0
    }
    frame++
  }, 17)

  return () => {
    fpsTimer && clearInterval(fpsTimer)
  }

fps(cb) 我传入一个回调，并传入 frame 参数，这样我就可以在外面灵活做我想做的事。

友情提醒：记得在小程序 onHide 的时候清除一下 fpsTimer