如何利用 document.createDocumentFragment 结合 requestAnimationFrame 优化 DOM 批量插入

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《如何利用 document.createDocumentFragment 结合 requestAnimationFrame 优化 DOM 批量插入》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

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

用 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);
  });
}

进阶分帧处理：超大批量（如上千项）

当节点数远超百级，单次构建 fragment 本身也可能耗时（如含复杂模板、事件绑定）。此时需把“创建 + 插入”按帧拆解：

• 设定每帧处理数量（如 20～50 个），避免单帧超 8ms
• 用递归或循环调用 requestAnimationFrame，每次只处理一批
• fragment 可复用：每帧新建一个，append 后立即插入，不累积到最后一帧

关键点：不是“所有节点建完再插”，而是“建一批、插一批”，既控帧耗，又早见内容。

注意事项与常见坑

• Fragment 不支持 querySelector 等查找方法：它只是容器，没完整 DOM 接口，需在插入后查真实节点
• rAF 不保证执行时机精确：它只是“下一帧前”，若前一帧卡住，你的回调会延后；别依赖它做精确计时
• 避免在 rAF 回调里再触发强制同步布局：比如读取 offsetHeight 后立刻改样式，可能引发额外重排
• Fragment 插入后自动清空：不能重复使用，每次都要新建

对比直接插入的收益

以插入 500 个