requestAnimationFrame

requestAnimationFrame作用：

①在下一次重绘前调用指定的回调函数，自动适配显示器刷新率(通常为60Hz，即每约16.67ms一次)。
②页面不可见时自动暂停，节省CPU/GPU资源和电池消耗。
③提供高精度时间戳，便于实现基于时间的平滑动画。

requestAnimationFrame代码实现（举例：倒计时器）：

let lastTimestamp;
function animateCountdown(timestamp) {
  if (!lastTimestamp) lastTimestamp = timestamp;
  const elapsed = timestamp - lastTimestamp;
  if (elapsed >= 1000) {
    lastTimestamp = timestamp;
  }
  requestAnimationFrame(animateCountdown);
}
requestAnimationFrame(animateCountdown);

注意点：requestAnimationFrame与setTimeout/setInterval区别：

• 帧率控制方面：

  前者：手动设定时间； 后者：会自动匹配显示器刷新率

• 性能优化方面：

  前者：即使页面不可见也会运行； 后者：页面不可见时自动暂停，节省资源

• 流畅度方面：

  前者：与屏幕刷新不同步，出现卡顿； 后者：与浏览器渲染同步，更流畅

• 性能消耗方面：

  前者：性能消耗较高； 后者：性能消耗较低

注意：本文归作者所有，未经作者允许，不得转载