JavaScript 中 requestAnimationFrame 和 requestIdleCallback 的用法？

推荐答案

// www.javascriptcn.com code example
// 使用 requestAnimationFrame 进行动画渲染
function animate() {
  // 动画逻辑
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

// 使用 requestIdleCallback 在空闲时间执行任务
function backgroundTask(deadline) {
  while (deadline.timeRemaining() > 0) {
    // 执行低优先级的任务
  }
  requestIdleCallback(backgroundTask);
}
requestIdleCallback(backgroundTask);

本题详细解读

requestAnimationFrame

requestAnimationFrame 是浏览器提供的一个用于优化动画渲染的 API。它会在浏览器下一次重绘之前调用指定的回调函数，通常用于执行动画或其他需要频繁更新的操作。使用 requestAnimationFrame 可以确保动画的流畅性，因为它会根据浏览器的刷新率（通常是 60Hz）来调用回调函数。

用法

• 回调函数：requestAnimationFrame 接受一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
• 递归调用：为了持续执行动画，通常会在回调函数中再次调用 requestAnimationFrame，形成递归调用。

示例

function animate() {
  // 动画逻辑
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

requestIdleCallback

requestIdleCallback 是浏览器提供的另一个 API，用于在浏览器空闲时执行低优先级的任务。它允许开发者在主线程空闲时执行一些不紧急的任务，从而避免阻塞用户交互或其他高优先级的任务。

用法

• 回调函数：requestIdleCallback 接受一个回调函数作为参数，该回调函数会在浏览器空闲时执行。
• deadline 参数：回调函数会接收一个 deadline 对象，该对象包含 timeRemaining() 方法，用于检查当前帧剩余的时间。
• 递归调用：为了持续执行任务，通常会在回调函数中再次调用 requestIdleCallback，形成递归调用。

示例

function backgroundTask(deadline) {
  while (deadline.timeRemaining() > 0) {
    // 执行低优先级的任务
  }
  requestIdleCallback(backgroundTask);
}
requestIdleCallback(backgroundTask);

区别与适用场景

• requestAnimationFrame：适用于需要与屏幕刷新率同步的动画或视觉更新。
• requestIdleCallback：适用于不需要立即执行的低优先级任务，如日志记录、数据预取等。

通过合理使用这两个 API，可以有效地优化 JavaScript 应用的性能，提升用户体验。