时间分片通过requestIdleCallback或setTimeout/Promise.then将万级数据分批插入DOM，结合DocumentFragment批量操作、防抖与渲染状态控制，避免主线程阻塞。
用时间分片（Time Slicing）把万级数据渲染拆成多批次插入，核心是利用 requestIdleCallback 或 setTimeout/Promise.then 切割任务，在浏览器空闲时段分批执行 DOM 插入，避免主线程长时间阻塞导致页面卡顿。
用 requestIdleCallback 实现自然分片
这是最符合“时间分片”本意的方案：让浏览器在空闲时主动调度任务，优先保障用户交互响应。
- 每次回调中检查剩余时间（
deadline.timeRemaining() > 0），只处理一批数据（如 50–200 条），然后退出 - 若还有未处理数据，递归调用
requestIdleCallback；若超时或没空闲时间，退回到setTimeout保证兜底 - 注意兼容性：IE 不支持，需用
setTimeout降级
用 Promise + setTimeout 手动分片（兼容性更好）
适合需要精确控制每批数量和间隔、或需兼容老浏览器的场景：
- 将数据切分成固定大小的块（如每批 100 条），用
Promise.resolve().then()或setTimeout(..., 0)触发下一批 - 不推荐用
async/await + setTimeout配合for await，易因微任务队列积压影响响应 - 示例节拍：每批插入后加
await new Promise(r => setTimeout(r, 0))，让出主线程，但不强制等待真实毫秒
DOM 插入优化：批量操作 + DocumentFragment
单次插入 1 万条元素 ≠ 1 万次 appendChild，否则开销爆炸：
立即学习“Java免费学习笔记（深入）”；
- 每批内用
DocumentFragment缓存所有新节点，最后一次性append到目标容器 - 避免在循环中读写
offsetHeight等触发重排的属性 - 如果列表支持虚拟滚动，万级数据更应直接上虚拟列表，而非靠分片硬扛渲染
配合防抖与状态控制，避免重复触发
数据可能来自搜索、筛选等用户操作，需防止高频触发导致任务堆积：
- 维护一个
isRendering标志位，正在分片时忽略新请求 - 若新数据到达且旧任务未完成，可取消当前分片（通过中断标志+检查逻辑），重新开始
- 对输入类操作加防抖（如 300ms），确保只对最终结果做一次分片渲染
