17370845950

DocumentFragment 是轻量级文档对象，用于批量创建和插入节点以避免频繁重排重绘、提升性能；通过 createDocumentFragment() 创建，添加子节点后一次性插入 DOM。

JavaScript 中的 DocumentFragment 是一个轻量级的文档对象，它不直接属于页面 DOM 树，但可以像真实 DOM 节点一样操作和添加子元素。它的核心作用是：**批量创建、组织和插入节点时，避免频繁触发重排（reflow）和重绘（repaint），从而提升性能。**

片段（Fragment）用来高效批量插入节点

当你需要一次性往页面中添加多个新元素时，如果逐个用 appendChild() 插入，浏览器可能每次都要重新计算布局、更新样式，造成性能浪费。而 DocumentFragment 允许你先把所有节点“攒”在一起，再一次性插入到 DOM 中 —— 浏览器只做一次渲染更新。

例如：

• 动态生成一长串列表项（
• ）并追加到
  中；
• 从模板字符串或数据循环创建多个卡片、表格行；
• 在 Vue/React 等框架底层，也常利用 fragment 思路优化 vnode 批量挂载。

怎么创建和使用 DocumentFragment

用 document.createDocumentFragment() 创建，然后像操作普通父节点一样添加子节点（append()、appendChild() 等），最后把它作为整体插入目标位置。

示例代码：

const frag = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i + 1}`;
  frag.appendChild(item); // 全部加到 frag，不触发现实 DOM 更新
}
document.querySelector('ul').appendChild(frag); // 一次插入，高效

Fragment 和直接拼接 innerHTML 有啥区别？

两者都能减少重排，但关键不同在于：

• innerHTML 是字符串操作：需手动转义防止 XSS，不支持直接绑定事件监听器，也不方便后续 DOM 操作；
• Fragment 是真实节点容器：可自由添加事件、修改属性、复用节点、类型安全，更可控也更符合现代 DOM 操作习惯。

简单说：要插纯内容且可信，innerHTML 快；要插结构复杂、需交互或来自用户输入的内容，Fragment 更安全可靠。

现代替代方案：template 标签 + content

除了 createDocumentFragment()，也可以配合 使用，它天生就是离线 DOM 容器：

const tmpl = document.getElementById('itemTemplate');
const frag = document.importNode(tmpl.content, true);
frag.querySelector('li').textContent = 'New item';
document.querySelector('ul').appendChild(frag);

这种方式更适合带结构的可复用模板，本质仍是利用了 fragment 的离线特性。

基本上就这些。Fragment 不是必须用，但在处理大量动态 DOM 插入时，是个简单又有效的性能优化手段。