requestAnimationFrame是什么

requestAnimationFrame (简称 `raf` 或 `rAF`) 是浏览器提供的一个用于优化动画和绘制操作的API，它允许开发者在浏览器下一次渲染之前安排回调函数。`raf`的主要作用是在浏览器准备好更新界面时执行指定的任务，这样可以确保动画流畅，避免在性能较差的情况下过度绘制，节省CPU资源。

当你调用 `requestAnimationFrame(callback)` 时，浏览器会在下一次重绘之前（通常是每秒60次）执行 `callback` 函数。这对于需要持续更新的内容，如游戏、滚动效果或动态布局等非常有用，因为它确保了视觉效果的一致性和高性能。

下面是一个简单的例子，展示了如何使用 `requestAnimationFrame` 定义一个动画：

let timeLastUpdate = null;
function animate() {
  if (timeLastUpdate === null) {
    timeLastUpdate = performance.now();  // 获取当前时间
  } else {
    const currentTime = performance.now();
    // 计算并应用动画变化
    let progress = (currentTime - timeLastUpdate) / 1000; // 假设动画速度为1秒
    // 更新UI...
    timeLastUpdate = currentTime;
  }
  requestAnimationFrame(animate);  // 递归调用自身，直到下一次重绘
}
animate();