requestIdleCallback插帧执行

---

requestIdleCallback 是一个浏览器 API，用于在浏览器空闲时执行某些任务。它允许开发者在主线程空闲时安排任务，从而避免阻塞用户界面，提升应用的性能和响应性。

• 回调函数接收一个参数 deadline，包含 timeRemaining() 方法，表示当前空闲时间的剩余时间（以毫秒为单位），可以用于判断是否还有时间执行更多任务。

function myTask(deadline) {
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    const task = tasks.shift()
    task()
  }
  if (tasks.length > 0) {
    requestIdleCallback(myTask)
  }
}
requestIdleCallback(myTask)

作用

• 优化性能：通过在浏览器空闲时执行非关键任务，减少对用户界面的影响。
• 延迟执行：可以将一些不急于执行的任务（如数据预加载、日志记录等）推迟到浏览器空闲时执行。
• 提高用户体验：确保用户界面在执行重要操作时保持流畅，避免卡顿。

使用方法

requestIdleCallback 接受两个参数：

1. callback：在浏览器空闲时执行的回调函数。
2. options（可选）：一个对象，可以包含 timeout 属性，指定回调的最大延迟时间。

示例

function myTask(deadline) {
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    // 从任务队列中取出任务并执行
    const task = tasks.shift()
    task()
  }

  // 如果还有任务未完成，可以在下次空闲时继续执行
  if (tasks.length > 0) {
    requestIdleCallback(myTask)
  }
}

// 假设有一些任务需要执行
const tasks = [() => console.log('Task 1 executed'), () => console.log('Task 2 executed'), () => console.log('Task 3 executed')]

// 开始请求空闲回调
requestIdleCallback(myTask)

选项参数

• timeout：指定回调的最大延迟时间（以毫秒为单位）。如果在指定时间内浏览器仍未空闲，回调将被强制执行。

requestIdleCallback(myTask, { timeout: 1000 }) // 最多延迟 1000 毫秒

注意事项

1. 浏览器支持：并非所有浏览器都支持 requestIdleCallback，在使用前应检查支持情况。可以使用 window.requestIdleCallback 来判断。
2. 回调执行时间：回调函数的执行时间应尽量短，以避免影响用户界面的流畅性。
3. 任务队列：可以使用一个任务队列来管理需要在空闲时间执行的任务。

兼容性处理

由于 requestIdleCallback 可能不被所有浏览器支持，可以使用一个简单的 polyfill 来确保兼容性：

if (!window.requestIdleCallback) {
  window.requestIdleCallback = function (callback) {
    return setTimeout(callback, 1)
  }
}

总结

requestIdleCallback 是一个强大的工具，可以帮助开发者在浏览器空闲时执行非关键任务，从而优化性能和用户体验。通过合理使用，可以有效提升应用的响应性。