如何利用 document.createDocumentFragment 结合 requestAnimationFrame 优化 DOM 批量插入-js教程-PHP中文网

fragment + raf 能提升性能是因为 fragment 在内存中操作不触发重排，raf 将操作延至重绘前并支持分帧执行，避免主线程长时间阻塞。

如何利用 document.createdocumentfragment 结合 requestanimationframe 优化 dom 批量插入

用 document.createDocumentFragment 搭配 requestAnimationFrame 批量插入 DOM，核心是“攒操作、避重排、分帧执行”——先在内存中构建完整结构，再一次性挂载；同时把大批量操作拆到多个空闲帧里，避免主线程长时间阻塞。

为什么 Fragment + rAF 能提升性能

直接循环 appendChild 多个元素会触发多次样式计算和布局（reflow），尤其在父容器已挂载时。Fragment 是轻量文档片段，不属主 DOM 树，往它里面添加节点不会触发任何渲染；而 requestAnimationFrame 确保操作发生在浏览器下一次重绘前，且可主动切分任务，避开 16ms 长任务警告。

基础组合写法：一次批量插入

适用于中等数量（如几十到两百个）节点，希望一次完成但不卡顿：

创建 DocumentFragment
循环生成并 append 到 fragment（不操作真实 DOM）
用 requestAnimationFrame 包裹最终的 parent.appendChild(fragment)

示例：

function batchAppend(parent, items) {
  const frag = document.createDocumentFragment();
  items.forEach(item => {
    const el = document.createElement('div');
    el.textContent = item;
    frag.appendChild(el);
  });
  requestAnimationFrame(() => {
    parent.appendChild(frag);
  });
}