requestIdleCallback适用于用户无感知的空闲时段执行低优先级任务，如长列表初始化、非关键数据预加载、埋点上报；不可用于动画或实时交互，也不应替代setTimeout做轮询。

requestIdleCallback 适合什么场景

它不是用来做动画或实时交互的，而是专为「用户不感知的空闲时段」执行低优先级任务。比如长列表初始化、非关键数据预加载、分析埋点上报——这些事卡一下没关系，但不能阻塞页面滚动或点击响应。
常见误用是拿它替代 setTimeout 做轮询，或者期望它每秒稳定触发几次；实际上它的调用时机完全由浏览器空闲程度决定，可能几秒都不触发一次。

怎么写一个安全的分片渲染循环

核心是别让单次回调干太多事，同时要处理超时兜底和终止条件。直接用 requestIdleCallback 套递归容易爆栈或失控，必须加控制：

• 每次最多处理 20 条 DOM 插入（具体数值按实际节点复杂度调，简单
  可到 50，带事件绑定的建议 ≤10）
• 用 deadline.timeRemaining() > 1 判断是否还能继续，而不是只看 deadline.didTimeout
• 必须设置最大总耗时（如 500ms），避免因空闲时间碎片化导致任务拖太久
• 手动清除前序 pending 的 requestIdleCallback，防止旧任务在新批次里重复执行

示例片段：


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载

requestIdleCallback

• 优先检测 typeof requestIdleCallback === 'function'，不支持时改用 postMessage + MessageChannel 模拟微任务空闲调度（比 setTimeout 更轻量）
• 更稳妥的降级是切回「节流式批量插入」：每 16ms（≈60fps）插入一批，用 performance.now() 控制帧间隔，避免掉帧
• 注意 Safari 对 requestIdleCallback 的 timeout 行为异常——设了 timeout 但没触发回调时，不会自动 fallback，得自己用 setTimeout 包一层来兜底

为什么渲染还是卡？检查这三点

分片本身不等于不卡，很多问题出在「分片之外」：

• 每个分片内做了同步 layout 强制重排：比如插完立即读 offsetHeight，会打断浏览器优化，把多个分片串成一个长任务
• 父容器用了 transform 或 will-change，但子元素频繁增删导致合成层反复重建
• 监听器没用事件委托，每条记录都绑独立 click，光是绑定过程就吃掉大量时间

真正有效的分片，是让每一小段都「纯插入+无读取+无样式强制计算」。一旦涉及测量或样式查询，就得重新评估是否该换用虚拟滚动。