JavaScript requestIdleCallback 空闲任务

requestIdleCallback非关键任务调度：deadline.timeRemaining()剩余空闲时间、didTimeout超时强制执行、React调度器的底层API之一、与requestAnimationFrame的区别 · 难度：入门 · +10XP

requestIdleCallback —— 在浏览器空闲时执行任务

有些任务不需要立即执行——比如发送统计埋点、预加载下一页资源。requestIdleCallback让你在浏览器"空闲"时执行这些低优先级任务。

基本用法

requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    const task = tasks.shift();
    task();  // 在空闲时间内尽可能多地执行任务
  }
  if (tasks.length > 0) {
    requestIdleCallback(arguments.callee); // 还有任务，下次空闲继续
  }
}, { timeout: 2000 }); // 最多等2秒强制执行

适用场景

动手练习

1. 基础练习：用requestIdleCallback延迟发送一批埋点数据。
2. 进阶应用：结合requestAnimationFrame和requestIdleCallback实现分级任务调度。
3. 项目实战：在页面的分析/统计代码中用requestIdleCallback避免影响性能。