requestIdleCallback 是浏览器在主线程空闲时执行低优先级任务的 API，适用于懒加载、统计上报等场景；它依赖帧完成、无高优任务且有足够空闲时间（≥1ms）才触发，支持 timeout 强制执行，并需配合 timeRemaining() 切片任务，Safari 不支持需降级。
requestIdleCallback 是浏览器提供的 API，用于在主线程空闲时执行低优先级任务，特别适合处理非紧急的 DOM 操作（如懒加载、统计上报、UI 微调等），避免阻塞用户交互或影响页面渲染。
理解 requestIdleCallback 的触发时机
它不是定时器，也不保证固定时间执行。浏览器只在以下条件同时满足时才调用回调：
- 当前帧已完成渲染（即 layout、paint 完毕）
- 主线程没有高优先级任务（如用户输入、动画帧、fetch 回调等）
- 有足够空闲时间（通常 ≥ 1ms，实际取决于帧剩余时间和任务队列）
注意：如果空闲时间不足，回调可能被推迟到下一帧；若页面进入后台或长期无空闲，回调甚至可能永不执行。
基础用法与参数解析
调用方式简单，但需正确处理 deadline 对象：
requestIdleCallback((deadline) => {
while (deadline.timeRemaining() > 0 && tasks.length > 0) {
const task = tasks.shift();
task();
}
if (tasks.length > 0) {
requestIdleCallback(arguments.callee); // 继续调度剩余任务
}
}, { timeout: 2000 }); // 强制 2s 内执行，防止任务长期挂起
关键点：
- timeRemaining() 返回剩余空闲毫秒数（通常 1–50ms），必须持续检查，不可一次性执行耗时操作
- didTimeout 为 true 表示已超时（即使没空闲也强制执行），此时应尽快完成或切片
- timeout 是重要兜底机制，尤其对需保障时效的任务（如错误日志上报）
安全处理 DOM 更新的实践要点
DOM 操作虽轻量，仍可能触发重排/重绘。空闲回调中需格外谨慎：
- 避免在循环中反复读写同一元素的 offsetTop/clientWidth 等属性（触发同步布局）
- 批量修改：用 documentFragment 或先 detach 元素再操作，最后一次性 append
- 优先使用 classList、textContent 等低开销 API，少用 innerHTML
- 若涉及动画或滚动位置，用 getBoundingClientRect() 替代 getComputedStyle 获取布局信息
示例：批量添加 class 而不打断渲染
const fragment = document.createDocumentFragment();
items.forEach(item => {
item.classList.add('processed');
fragment.appendChild(item);
});
container.appendChild(fragment); // 一次 DOM 提交
降级与兼容性处理
requestIdleCallback 在 Safari 中长期未支持（截至 Safari 17.4 仍无），需 fallback：
- 检测是否存在：
if ('requestIdleCallback' in window) - 降级方案：用 setTimeout(fn, 0) 或 Promise.resolve().then()，但注意它们不感知空闲，仅避让当前任务队列
- 更优降级：结合 requestAnimationFrame 判断帧结束（
rafId = requestAnimationFrame(() => { cancelAnimationFrame(rafId); fn(); })），模拟“帧后执行”逻辑
生产环境建议封装统一调度器，自动选择最优策略，并记录 fallback 使用比例用于监控。
