requestIdleCallback 是浏览器在空闲时段执行低优先级任务的API，需与定时器配合实现延迟启动、失败降级和分片处理；它不保证准时执行，仅适合轻量非阻塞任务。
requestIdleCallback 是浏览器提供的一个 API，用于在浏览器空闲时段执行低优先级任务，它和定时器（如 setTimeout、setInterval）配合使用，能更智能地调度非关键逻辑，避免阻塞主线程、影响渲染或交互响应。
理解 requestIdleCallback 的核心机制
它不是定时器，而是由浏览器根据当前帧的剩余空闲时间决定何时调用回调。每次调用时会传入一个 IdleDeadline 对象，其中 timeRemaining() 方法告诉你还能安全执行多久（通常几毫秒），didTimeout 表示是否因超时被强制触发（比如任务排队太久）。
注意：它不保证准时执行，也不适合做精确延时或动画控制；它的价值在于“见缝插针”——只在页面没忙的时候才干活。
与定时器配合的典型场景
单纯靠 requestIdleCallback 无法实现周期性或延迟触发，这时需要结合定时器来兜底或补位：
- 延迟启动 + 空闲执行：用 setTimeout 延迟 100ms 后再 requestIdleCallback，避免抢占首屏渲染关键路径
- 失败降级：如果 requestIdleCallback 长时间未被调用（比如页面持续忙碌），用 setInterval 每 5s 检查一次，兜底执行关键清理逻辑
- 分片处理大任务：把一个长任务拆成小块，每块用 requestIdleCallback 执行；若 timeRemaining() 不足，则用 setTimeout 延后下一块，避免单次超时阻塞
实用配合写法示例
下面是一个安全执行日志上报的轻量封装：
function scheduleIdleTask(task, timeout = 2000) {
let isScheduled = false;
function run() {
if (isScheduled) return;
isScheduled = true;
requestIdleCallback(
() => {
task();
isScheduled = false;
},
{ timeout }
);
}
// 首次延迟 100ms 启动，避开关键渲染期
setTimeout(run, 100);
// 超时兜底：2s 内没执行就强制走 setTimeout
setTimeout(() => {
if (isScheduled) {
isScheduled = false;
setTimeout(task, 0);
}
}, timeout + 100);
}
这样既利用了空闲时间，又避免了任务永久挂起。
注意事项与常见误区
requestIdleCallback 在部分旧版 Safari 中不支持，需 feature detect 或 fallback；它也不能在 Web Worker 中使用。另外，不要在其中执行 DOM 修改或大量计算——它本就面向轻量、非阻塞任务。
定时器不是它的替代品，而是协作伙伴：定时器负责“什么时候开始等”，requestIdleCallback 负责“什么时候真正干”。两者分工明确，才能兼顾响应性与资源效率。
