可使用requestIdleCallback在浏览器空闲时分批执行低优先级异步任务，避免阻塞主线程；它由浏览器在帧末调度，通过timeRemaining()和didTimeout控制执行节奏，并需兼容Safari降级处理。
可以利用 requestIdleCallback 在浏览器空闲时段分批执行异步任务，避免阻塞主线程、影响渲染和交互。它不是定时器，而是由浏览器在帧末尾有剩余时间时主动调度，适合处理低优先级、可中断的批量工作（如日志上报、DOM 批量更新、状态预处理等）。
基本用法：注册空闲回调
调用 requestIdleCallback(callback, options) 注册一个回调，浏览器会在空闲时执行它，并传入 IdleDeadline 对象，提供 timeRemaining()（剩余可用毫秒数）和 didTimeout（是否超时）两个关键属性：
-
timeRemaining()返回当前空闲周期内还剩多少毫秒可安全使用（通常 1–50ms，取决于帧节奏） -
didTimeout为true表示任务已超时（即浏览器强制执行，哪怕没空闲），此时应尽快完成并让出控制权
实现分批处理的核心逻辑
关键在于：每次只处理一部分任务，检查 timeRemaining() > 0 或未超时，再决定是否继续；若时间不足或超时，则用 requestIdleCallback 递归调度下一批：
function batchProcess(tasks, batchSize = 10) {
const processChunk = (deadline) => {
while (tasks.length && deadline.timeRemaining() > 0) {
const task = tasks.pop();
task(); // 执行单个任务
}
if (tasks.length > 0) {
requestIdleCallback(processChunk, { timeout: 1000 });
}
};
requestIdleCallback(processChunk, { timeout: 1000 });
}
-
batchSize不是硬性限制，而是配合timeRemaining()动态控制的参考值 -
timeout: 1000确保即使长时间无空闲，也能在 1 秒内兜底执行（防止任务被无限搁置） - 推荐用
while循环而非for，便于随时退出
注意事项与兼容性处理
requestIdleCallback 在 Safari 中长期不支持（截至 Safari 17.4 仍不可用），需降级为 setTimeout 或 postMessage 模拟空闲调度：
立即学习“Java免费学习笔记（深入）”；
- 检测是否存在：
if ('requestIdleCallback' in window)，否则 fallback 到setTimeout(fn, 0)或更精细的MessageChannel微任务调度 - 不要在
timeRemaining() <= 0时强行执行 —— 这表示浏览器已无余量，继续执行可能造成卡顿 - 避免在回调中触发强制同步布局（如读取
offsetTop、getComputedStyle），否则会破坏空闲意义
适用场景举例
适合那些「做了更好，不做也不影响当前体验」的任务：
- 非关键路径的分析埋点聚合与上报
- 大量列表数据的懒初始化（如为 1000 条记录预生成轻量 state）
- 离线缓存清理、IndexedDB 数据整理
- 复杂表单的异步校验（非提交时实时校验）
不适合：动画帧逻辑、用户输入响应、关键业务流程（如支付确认）——这些必须用同步或 requestAnimationFrame 保证及时性。
