requestAnimationFrame 可以做什么？

Question

requestAnimationFrame(callback) API 可以在浏览器下一次重绘之前执行回调，它通常会与屏幕的刷新率保持一致。 大部分屏幕的刷新率都是 60Hz ，也就是一秒内刷新 60 次，那我们计算一下就可以得到一次执行大概是 16.6ms 左右： 1000ms/60 = 16.6666 ，这也就是说如果你一个任务执行超过了 16.6ms ，就有存在卡顿的风险。

应用

我们可以利用 requestAnimationFrame 来计算每秒帧数 fps（frame per second）。具体思路是：设置一个计数器和一个时间变量，然后执行 requestAnimationFrame 调度给计数器加 1，如果判断到当前时间与上次执行的时间差超过了 1000ms，我们就打印出当前的计数器，这个就是帧数了。

(() => {
  let fps = 0
  let prevTimestamp = Date.now()
  function loop() {
    fps++
    const elapsed = Date.now() - prevTimestamp
    if (elapsed >= 1000) {
      console.log('fps', fps)
      prevTimestamp = Date.now()
      fps = 0
    }
    requestAnimationFrame(loop)
  }
  requestAnimationFrame(loop)
})()