requestIdleCallback是浏览器在空闲时段执行低优先级任务的API，适用于日志上报、非关键DOM更新等“做了更好，不做也无妨”的场景，不适用于需确定性时机的任务。
requestIdleCallback 是浏览器提供的一种调度 API，用于在浏览器空闲时段执行低优先级任务，避免阻塞渲染和用户交互。它不保证执行时间，也不适用于必须及时完成的操作，但非常适合处理如日志上报、非关键 DOM 更新、预加载、状态同步等“做了更好，不做也无妨”的任务。
什么时候该用 requestIdleCallback？
适合以下场景：
- 页面加载后整理分析数据（如统计页面元素分布）
- 批量更新非可见区域的 DOM（比如虚拟滚动中缓存区的节点补全）
- 向服务端发送非实时埋点（用户停留时长、页面滚动深度）
- 清理或压缩内存中的临时缓存对象
- 执行轻量级的计算型任务（如格式化待展示的数据）
不适合：动画帧逻辑、用户输入响应、表单校验、错误上报等需要确定性时机的任务。
基本用法与参数含义
调用方式简单：
const handle = requestIdleCallback((deadline) => {
while (deadline.timeRemaining() > 0 && tasks.length > 0) {
doNextTask();
}
if (tasks.length > 0) {
requestIdleCallback(handle); // 继续调度
}
}, { timeout: 2000 }); // 超时强制执行（可选）
deadline 对象包含两个关键属性：
- timeRemaining()：返回当前空闲时段剩余毫秒数（通常 1~50ms），返回值可能为 0，需主动检查
- didTimeout：布尔值，仅当设置了 timeout 且超时触发时为 true
注意：requestIdleCallback 返回的是一个数字 ID，可用于 cancelIdleCallback(id) 取消，但实际中较少手动取消。
实际使用中的关键细节
- 不要假设每次都能执行完所有任务——必须用 while 循环 + timeRemaining() 控制执行量
- 避免在回调中触发重排（layout thrashing）或大量 DOM 写入；如有必要，合并操作或改用 requestAnimationFrame 配合
- 设置 timeout 是良好实践，防止任务被无限推迟（尤其在页面持续忙碌时）
- 无法在 Web Worker 中使用（该 API 仅限主线程）
- 部分旧版浏览器（如 Safari 一直未支持）需降级处理，可用 setTimeout(..., 0) 或 Promise.resolve().then() 模拟，但失去空闲判断能力
简单封装一个可靠的任务队列
便于复用和管理：
class IdleScheduler {
constructor() {
this.queue = [];
}
push(task) {
this.queue.push(task);
this._schedule();
}
_schedule() {
if (this.queue.length === 0 || this.scheduled) return;
this.scheduled = true;
requestIdleCallback((deadline) => {
while (deadline.timeRemaining() > 0 && this.queue.length > 0) {
const task = this.queue.shift();
task();
}
this.scheduled = false;
if (this.queue.length > 0) {
this._schedule(); // 剩余任务继续调度
}
}, { timeout: 1000 });
}
}
// 使用示例
const scheduler = new IdleScheduler();
scheduler.push(() => console.log('log 1'));
scheduler.push(() => console.log('log 2'));
这种封装隐藏了调度细节，让业务代码更专注任务本身。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
