什么是requestAnimationFrame

2024-06-30 247 阅读2分钟

requestAnimationFrame 是一个由浏览器提供的 JavaScript API，用于在下一次页面重绘之前执行指定的回调函数。它主要用于执行动画和其他需要高性能的操作，因为它可以让浏览器在执行动画之前做好准备，以获得更流畅的动画效果。

主要特点

与屏幕刷新同步：requestAnimationFrame 会与浏览器的屏幕刷新频率同步，通常是每秒 60 次，这意味着动画会在每秒刷新 60 次，呈现更平滑的效果。
自动优化：浏览器会自动暂停或者降低频率执行 requestAnimationFrame 的回调函数，当页面不可见或者被隐藏时，以节省 CPU 和电池消耗。
最佳化性能：使用 requestAnimationFrame 可以避免一些问题，比如在不可见的标签页中运行动画会浪费资源，而 requestAnimationFrame 可以确保动画只在页面可见时执行。

使用示例

javascript复制代码function animate() {
  // 执行动画操作
  console.log("Animating...");
  // 通过 requestAnimationFrame 请求下一帧动画
  requestAnimationFrame(animate);
}

// 开始动画
animate();

兼容性

requestAnimationFrame 的兼容性相对较好，支持大多数现代浏览器，包括 Chrome、Firefox、Safari、Edge 等。在移动设备上也得到了广泛支持。

与 setTimeout 的比较

requestAnimationFrame 与 setTimeout 和 setInterval 相比，有一些显著的优势：

更平滑的动画效果：requestAnimationFrame 会与浏览器的屏幕刷新频率同步，因此能够产生更平滑的动画效果。
自动优化：浏览器会自动暂停或者降低频率执行 requestAnimationFrame 的回调函数，以节省 CPU 和电池消耗。
在不可见的标签页中运行动画不会浪费资源：requestAnimationFrame 可以确保动画只在页面可见时执行。