IdleCallback 是浏览器在主线程空闲时调用低优先级任务的 API，通过 requestIdleCallback 注册回调，利用 deadline.timeRemaining() 控制执行时长，适用于非关键日志上报、渐进式预加载等场景，但需注意兼容性与分片处理。
IdleCallback 是浏览器提供的一种 API，用于在浏览器空闲时段执行低优先级任务，避免阻塞用户交互或关键渲染流程。它不保证执行时间，也不适合处理必须及时完成的任务，但对优化性能、提升响应性非常有用。
IdleCallback 的基本用法
通过 window.requestIdleCallback() 注册回调函数，浏览器会在主线程空闲时（例如动画帧之间、事件处理之后、渲染之前）调用它，并传入一个 deadline 对象，包含剩余空闲时间（timeRemaining()）和是否超时（didTimeout）信息。
- 回调最多执行约 50ms（具体由浏览器决定），超过时间会被中断
- 若任务未完成，可再次调用
requestIdleCallback继续处理（常配合递归或队列） - 支持传入选项
{ timeout: 2000 }，强制在指定毫秒内执行（即使未空闲），此时didTimeout为true
适合 IdleCallback 的典型场景
这类任务不直接影响当前用户体验，延迟执行无感知，但积压可能影响后续性能：
- 非关键日志上报（如页面停留时长、用户行为埋点）
- 渐进式数据预加载（如滚动到底部前预取下一页内容）
- 轻量 DOM 清理（如移除已废弃的临时节点、清理 WeakMap 缓存）
- 非实时的 UI 状态同步（如更新非焦点区域的统计数字）
使用时的关键注意事项
IdleCallback 不是“后台线程”，仍在主线程运行，不能替代 Web Worker；它也不同于 setTimeout(fn, 0) 或 Promise.then()，后者属于微任务/宏任务队列，而 IdleCallback 是独立调度机制。
立即学习“Java免费学习笔记（深入）”；
- 不要在其中执行耗时操作（如大数组排序、正则全局匹配、大量 DOM 插入）——应主动分片或提前退出
- 需检查
deadline.timeRemaining() > 0再执行逻辑，否则可能打断渲染 - 注意兼容性：Chrome 47+、Edge 16+、Firefox 55+ 支持；Safari 目前不支持（截至 Safari 17），需降级方案（如
setTimeout+ 时间切片模拟） - 无法取消已注册的回调（无对应
cancelIdleCallback，但现代浏览器已支持该方法，可用window.cancelIdleCallback配合 ID 清理）
一个实用的分片处理示例
假设要处理 10000 条数据并批量更新状态，可拆解为小块，在空闲时段逐步执行：
function processItems(items, index = 0) {
const chunkSize = 50;
const deadline = window.idleDeadline || { timeRemaining: () => 0 };
while (index < items.length && deadline.timeRemaining() > 0) {
// 执行单条处理逻辑
updateItemState(items[index]);
index++;
}
if (index < items.length) {
requestIdleCallback(() => processItems(items, index));
}
}
requestIdleCallback(() => processItems(largeDataSet));
