浏览器【详解】requestIdleCallback（浏览器空闲时执行）

朝阳392025-08-02 14:13

简介

requestIdleCallback 是浏览器的一个 API，用于在浏览器空闲时间执行低优先级任务，避免阻塞主线程，提升页面性能和响应速度。

当浏览器完成了关键任务（如渲染、布局、用户交互处理）且暂时没有更高优先级的工作时，会处于 "空闲状态"。requestIdleCallback 允许开发者利用这段空闲时间执行非紧急任务（如日志上报、数据预处理、缓存清理等），而不影响页面的流畅性。

应用场景

日志上报：非紧急的用户行为日志、性能数据等。
数据预加载：提前加载可能需要的数据（非首屏必需）。
缓存清理 ：本地存储（localStorage）的过期数据清理。
统计分析：页面停留时间、元素曝光等非实时计算。

不适合的场景

紧急任务 ：如用户输入后的即时反馈、动画帧更新（应使用 requestAnimationFrame）。
长时间任务 ：单个任务执行时间过长（超过 timeRemaining()），需拆分后分批执行。
DOM 操作密集型任务 ：可能触发重排重绘，建议放在 requestAnimationFrame 中。

语法

c 复制代码

// 定义要在空闲时执行的任务
function idleTask(deadline) {
  // deadline 对象包含：
  // - timeRemaining()：返回当前空闲时间的剩余毫秒数（动态更新）
  // - didTimeout：布尔值，表示任务是否因超时执行
  
  // 只要有剩余时间且任务未完成，就继续执行
  while (deadline.timeRemaining() > 0 && 还有任务要做) {
    console.log('执行空闲任务...');
    // 执行部分任务（避免长时间占用线程）
  }
  
  // 如果任务未完成，请求下一次空闲时间继续执行
  if (还有任务要做) {
    requestIdleCallback(idleTask);
  }
}

// 注册空闲任务（第二个参数可选，设置超时时间）
requestIdleCallback(idleTask, { timeout: 5000 }); 
// 超时时间：若5秒内没有空闲时间，强制执行任务

每次执行时间受 timeRemaining() 限制（通常不超过 50ms），防止任务过长阻塞主线程。
通过 timeout 选项确保任务最终会被执行（即使浏览器一直忙碌）。