requestIdleCallback适用于用户无感知的空闲时段执行低优先级任务，如长列表初始化、非关键数据预加载、埋点上报；不可用于动画或实时交互，也不应替代setTimeout做轮询。
requestIdleCallback 适合什么场景
它不是用来做动画或实时交互的，而是专为「用户不感知的空闲时段」执行低优先级任务。比如长列表初始化、非关键数据预加载、分析埋点上报——这些事卡一下没关系，但不能阻塞页面滚动或点击响应。
常见误用是拿它替代 setTimeout 做轮询，或者期望它每秒稳定触发几次；实际上它的调用时机完全由浏览器空闲程度决定，可能几秒都不触发一次。
怎么写一个安全的分片渲染循环
核心是别让单次回调干太多事，同时要处理超时兜底和终止条件。直接用 requestIdleCallback 套递归容易爆栈或失控，必须加控制：
- 每次最多处理 20 条 DOM 插入（具体数值按实际节点复杂度调，简单
<div> 可到 50，带事件绑定的建议 ≤10）<li>用 <code>deadline.timeRemaining() > 1判断是否还能继续，而不是只看deadline.didTimeout - 必须设置最大总耗时（如 500ms），避免因空闲时间碎片化导致任务拖太久
- 手动清除前序 pending 的
requestIdleCallback，防止旧任务在新批次里重复执行
示例片段：
function renderChunk(items, index = 0, startTime = performance.now()) {
const chunkSize = 20;
const endTime = performance.now();
<p>if (index >= items.length || endTime - startTime > 500) {
return;
}</p><p>requestIdleCallback((deadline) => {
while (index < items.length && deadline.timeRemaining() > 1) {
const item = items[index++];
container.appendChild(createItemEl(item));
}</p><pre class="brush:php;toolbar:false;">if (index < items.length) {
renderChunk(items, index, startTime);
}}, { timeout: 1000 }); }
兼容性差怎么办：没有 requestIdleCallback 怎么降级
IE 全系、Safari 16.4 之前、部分安卓 WebView 都不支持 requestIdleCallback。不能直接 fallback 到 setTimeout(..., 0)，那会抢占主线程，失去分片意义。
立即学习“前端免费学习笔记（深入）”；
- 优先检测
typeof requestIdleCallback === 'function'，不支持时改用postMessage+MessageChannel模拟微任务空闲调度（比setTimeout更轻量） - 更稳妥的降级是切回「节流式批量插入」：每 16ms（≈60fps）插入一批，用
performance.now()控制帧间隔，避免掉帧 - 注意 Safari 对
requestIdleCallback的 timeout 行为异常——设了timeout但没触发回调时，不会自动 fallback，得自己用setTimeout包一层来兜底
为什么渲染还是卡？检查这三点
分片本身不等于不卡，很多问题出在「分片之外」：
- 每个分片内做了同步 layout 强制重排：比如插完立即读
offsetHeight，会打断浏览器优化，把多个分片串成一个长任务 - 父容器用了
transform或will-change，但子元素频繁增删导致合成层反复重建 - 监听器没用事件委托，每条记录都绑独立
click，光是绑定过程就吃掉大量时间
真正有效的分片，是让每一小段都「纯插入+无读取+无样式强制计算」。一旦涉及测量或样式查询，就得重新评估是否该换用虚拟滚动。
