分块处理DOM插入的核心是分批轻放，通过DocumentFragment打包每批节点、控制每批20–200条、用requestIdleCallback协调时机，并简化节点结构以降低单节点开销。
分块处理 DOM 插入，核心是把“一次塞满”变成“分批轻放”，既避免主线程长时间阻塞，又防止浏览器反复重排重绘。关键不在拆多少块，而在于每一块的大小、插入节奏和操作方式是否匹配当前设备与数据特征。
用 DocumentFragment 打包每一批节点
每批生成的 DOM 节点不要直接 append 到真实容器，而是先集中到一个 DocumentFragment 中：
- 调用
document.createDocumentFragment()创建新 fragment（每次都要新建，不可复用） - 循环创建元素（
document.createElement）、设置内容、添加事件监听器（如需），全部fragment.appendChild() - 整批组装完成后，只执行一次
container.appendChild(fragment)
这样每批仅触发一次重排重绘，比逐个插入快 5–10 倍，且真正节省的是浏览器反复计算布局的隐性开销。
控制每批数量：20–200 条较稳妥
批大小不是固定值，需兼顾性能与响应感：
- 低端设备或复杂节点（含图片、内联样式、计算属性）建议每批 ≤ 50 条
- 中高端设备、纯文本
<li>类简单结构，可放宽至 100–200 条 - 超过 200 条/批容易造成单次 JS 执行过长，用户感知卡顿；少于 20 条则调度开销占比上升，收益递减
用 requestIdleCallback 协调插入时机
别用 setTimeout(..., 0) 或 Promise.resolve().then()——它们只保证“尽快”，可能抢占渲染帧。改用：
-
requestIdleCallback(callback, { timeout: 1000 })，让浏览器在空闲时执行插入 - 回调中处理一批，若还有剩余，递归调用自身（注意检查
deadline.timeRemaining() > 16再继续） - 超时兜底（如 1 秒内未完成），强制推进下一批，防无限延迟
这种方式能自然适配不同设备的帧率与负载，比手动节流更可靠。
配合简化节点结构，降低单节点成本
分块只是调度策略，节点本身越轻，每批耗时越短：
- 避免在循环中读取
offsetHeight、getComputedStyle等触发强制同步布局的属性 - 样式统一用 CSS 类名切换（
el.className = 'item-active'），而非逐个设style.color - 事件优先用委托，而不是为每个节点绑定独立 handler
- 图片懒加载或占位，不强制首屏渲染全部资源
节点轻了，同样 100 条的批次，执行时间可能缩短 40% 以上。
