requestIdleCallback可行但需严格控制：它非定时器，仅空闲时触发，盲目递归易卡死或漏执行；必须限制单次处理量、用timeRemaining()>1判断续行、设总耗时上限，并降级兼容不支持环境。
直接用 requestIdleCallback 做时间分片是可行的，但不加控制会失控——它不是定时器，也不是每帧必调，盲目递归容易卡死或漏执行。
为什么 requestIdleCallback 不能当 setTimeout 用
浏览器只在空闲时才调用它，比如用户没滚动、没点击、没动画、没网络响应的间隙。你写个 requestIdleCallback(() => { /* ... */ })，可能等 3 秒都不触发；而写成递归调用又容易堆栈溢出或任务堆积。
- 它不保证调用频率，
timeout参数只是“最晚多久必须调”，不是“每隔多久调一次” -
deadline.didTimeout为true时，说明已超时，但此时deadline.timeRemaining()可能仍返回 > 0，不能只靠didTimeout判断是否该停 - 多个未完成的
requestIdleCallback调用会排队，旧任务可能在新数据批次里重复执行
怎么写一个安全、可中断的分片渲染函数
核心是三件事：控单次工作量、测剩余时间、设总耗时上限。下面这个 renderChunk 是生产可用的最小闭环：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
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 }); }
- 每次最多处理
chunkSize条（简单<div> 可设 50，带事件绑定的建议 ≤10）<li>用 <code>deadline.timeRemaining() > 1判断是否还能继续，而不是只看didTimeout - 用
performance.now()记总耗时，超过 500ms 强制退出，防止碎片空闲拖太久 - 每次调用前应手动清除上一轮 pending 的
requestIdleCallback（用cancelIdleCallback+ ID 管理） - 优先检测
typeof requestIdleCallback === 'function' - 不支持时，用
MessageChannel模拟微任务空闲调度，比setTimeout更轻量 - 更稳妥的降级是「帧对齐批量插入」：每 16ms 插入一批，用
performance.now()控制间隔，避免掉帧 - 示例降级逻辑：
if (!('requestIdleCallback' in window)) { return renderInFrames(items); } - 必须配合
DocumentFragment：先 append 到 fragment，最后一次性挂到真实 DOM - 避免在分片循环中读取
offsetHeight、getComputedStyle等触发强制同步布局的 API - 如果列表带搜索/排序，记得把数据过滤和分片解耦：先生成最终待渲染数组，再分片，别边算边插
- 服务端渲染（SSR）+ 客户端 hydration 时，注意分片起始点要和已存在 DOM 对齐，否则 React/Vue 可能报 key 冲突
不支持 requestIdleCallback 怎么降级
Safari 16.4 之前、所有 IE、多数安卓 WebView 都不支持。不能 fallback 到 setTimeout(..., 0)，那会抢占主线程，失去分片意义。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的 DOM 批量操作细节
即使分片了，每次 appendChild 单个节点仍会触发重排。1000 条分 50 批，仍是 50 次重排 —— 这比你想的还贵。
