requestIdleCallback 是浏览器在主线程空闲时执行低优先级任务的机制，适用于日志上报、数据预处理等非关键计算，需配合 deadline.timeRemaining() 控制执行时长并分批调度，注意 Safari 兼容性及 DOM 操作风险。
requestIdleCallback 是浏览器提供的一种机制，让你能在主线程空闲时执行低优先级任务，避免阻塞用户交互或渲染。它适合处理那些“做了更好，不做也不影响功能”的计算型工作，比如日志上报、非实时的数据预处理、UI 状态的渐进式更新等。
理解 requestIdleCallback 的触发时机
浏览器会在一帧的渲染完成后、下一次事件循环开始前，检查是否还有空闲时间。如果有（通常 > 1ms），就会调用你注册的回调函数，并传入一个 deadline 对象，其中 deadline.timeRemaining() 告诉你当前还能安全运行多久，deadline.didTimeout 表示是否已超时（即浏览器决定强制结束空闲期）。
注意：它不是定时器，也不是每帧都调用；如果页面持续忙碌（如动画、频繁输入），回调可能长时间不被执行。
分批次处理任务的核心写法
关键在于每次只做一小部分工作，并主动检查 deadline 是否还允许继续。一旦时间快用完，就暂停，把剩余任务用 requestIdleCallback 再次排队。
- 维护一个待处理的任务队列（如数组、迭代器或状态指针）
- 在回调中循环处理，每次处理固定数量（如 10~50 条）或耗时控制在 1ms 内
- 每次循环前调用 deadline.timeRemaining() > 0.5 判断是否继续（留点余量防抖动）
- 若中断，则用 requestIdleCallback 递归调度后续批次
一个实用的批量处理封装示例
下面是一个轻量封装，支持中断恢复和自动重排程：
function batchProcess(tasks, handler, options = {}) {
const { batchSize = 20, timeoutMs = 1000 } = options;
let index = 0;
<p>function work(deadline) {
const start = performance.now();
let count = 0;</p><pre class="brush:php;toolbar:false;">while (index < tasks.length && count < batchSize && deadline.timeRemaining() > 0.5) {
handler(tasks[index], index);
index++;
count++;
}
// 若还有任务未完成，且未超时，继续排队
if (index < tasks.length && !deadline.didTimeout) {
requestIdleCallback(work, { timeout: timeoutMs });
}}
requestIdleCallback(work, { timeout: timeoutMs }); }
// 使用示例：对 1000 个对象做轻量计算（不阻塞 UI） const data = Array.from({ length: 1000 }, (_, i) => ({ id: i, value: i * 2 })); batchProcess(data, item => { item.processed = true; item.result = Math.sqrt(item.value); });
注意事项与替代建议
requestIdleCallback 在 Safari 中支持较晚（iOS 16.4+/macOS 13.3+），旧版本会静默失败，务必加降级逻辑：
- 检测是否存在 window.requestIdleCallback，不存在则改用 setTimeout(..., 0) 或 queueMicrotask 模拟，但需自行限频
- 避免在 idle 回调中触发重排（layout）或大量 DOM 修改，否则可能引发意外卡顿
- 对有严格时效要求的任务（如实时音视频处理），不要依赖它；它只适用于“尽力而为”的场景
- 若任务可并行且不依赖 DOM，考虑 Web Worker 替代，彻底移出主线程
