requestIdleCallback 在浏览器主线程空闲且距下一帧渲染≥50ms时触发，适合低优先级预加载/预解析；需设timeout、分片处理、避免同步耗时操作，并配合IntersectionObserver与queueMicrotask确保渲染友好。
requestIdleCallback 什么时候真正空闲
它只在浏览器主线程空闲、且距离下一帧渲染还有至少 50ms（即未逼近 60FPS 的 16.6ms 帧周期）时才触发。不是“没任务就调”，而是“确定不会挤占渲染”的窗口期才执行——所以它天然适合做预加载、预解析这类低优先级但需及时响应的操作。
常见错误是以为 requestIdleCallback 会频繁触发，结果在动画中注册后发现数据解析卡顿。其实一旦动画开始，requestIdleCallback 很可能被跳过数帧，甚至完全不执行，直到动画暂停或进入空闲间隙。
- 必须配合
timeout参数（如{ timeout: 2000 }），否则在持续高负载（比如滚动+动画）下可能永远等不到空闲 - 回调函数内不能做同步耗时操作，例如
JSON.parse大对象、正则全局匹配长文本——这些应拆成小块，用idleDeadline.timeRemaining()动态切分 - Chrome 120+ 已默认启用，但 Safari 仍需检查：可用
typeof requestIdleCallback === 'function'降级为setTimeout(..., 0)
如何安全地预解析 JSON 数据流
直接在 requestIdleCallback 中 JSON.parse 一个 5MB 的响应体，大概率导致单次执行超时、阻塞下一帧。正确做法是把解析过程「让渡控制权」，每次只处理一部分。
示例场景：你已用 fetch 拿到 response.body 流，想边接收边预解析成结构化对象，但不打断正在播放的 Lottie 动画。
let parserState = { buffer: '', cursor: 0 };
function parseInIdle(deadline) {
while (deadline.timeRemaining() > 3 && parserState.cursor < rawData.length) {
// 每次只解析一段，比如按行或按 JSON 对象边界切分
const nextBreak = rawData.indexOf('\n', parserState.cursor);
if (nextBreak === -1) break;
const line = rawData.slice(parserState.cursor, nextBreak);
try {
const item = JSON.parse(line);
cache.push(item);
} catch {}
parserState.cursor = nextBreak + 1;
}
if (parserState.cursor < rawData.length) {
requestIdleCallback(parseInIdle, { timeout: 1000 });
}
}- 永远用
deadline.timeRemaining() > X（建议3–5ms）判断是否继续，而不是固定循环次数 - 避免在解析中触发重排（如读取
offsetHeight）或大量内存分配（如拼接长字符串） - 如果原始数据是二进制流（如 ArrayBuffer），优先用
TextDecoder流式解码，而非一次性转toString()
与 IntersectionObserver 配合预加载更可靠
单纯靠空闲时间预解析，容易因用户快速滚动而「白忙活」。更稳的做法是：先用 IntersectionObserver 判断某区块即将进入视口，再触发 requestIdleCallback 启动该区块对应的数据拉取与解析。
这样既避开无意义预热，又确保数据在用户看到前已就绪——而且所有动作都发生在空闲期，不影响当前帧。
- 观察阈值设为
0.1（即元素还有 10% 进入视口时就触发），比0更早启动 - fetch 请求本身用
keepalive: true（若为非关键请求），防止页面卸载中断 - 解析完成后，用
queueMicrotask(() => { /* 渲染更新 */ })确保在下一个宏任务开头交还控制权，不抢渲染时机
为什么不用 setTimeout(0) 或 Promise.then 替代
它们只是把任务推到下一个宏任务或微任务队列，无法感知渲染压力。在动画密集期，setTimeout(0) 回调可能紧贴在 requestAnimationFrame 之后执行，实际只剩 2–3ms，极易造成掉帧；而 requestIdleCallback 是浏览器亲自调度的「渲染友好型队列」。
真实踩坑案例：某列表页用 Promise.allSettled(fetches).then(parseAll) 预加载下一页数据，结果动画一开，parseAll 就把主线程堵死 12ms——换成 requestIdleCallback 分片解析后，60FPS 稳定保持。
注意：requestIdleCallback 不是银弹。如果预解析逻辑本身有隐式同步开销（比如依赖未 mock 的 DOM 方法、或触发 getter 计算），依然会破防。得真正在空闲期里只干轻量事。
