documentfragment 用于离线批量插入节点以避免频繁重排重绘；它是轻量级文档片段，操作不触发布局计算，仅一次挂载即可高效插入全部子节点。

用 DocumentFragment 批量插入节点，核心是“先离线组装，再一次性挂载”，避免频繁操作真实 DOM 导致的重排重绘。

为什么用 DocumentFragment？

直接循环调用 appendChild 插入多个节点时，每次都会触发浏览器布局计算（即使不可见），性能较差。而 DocumentFragment 是轻量级的文档片段，不绑定到页面，操作它不会引发重排；最后只需一次 appendChild 或 append，就能把所有子节点高效插入目标容器。

基本用法：创建、添加、插入

步骤很直接：

• 用 document.createDocumentFragment() 创建一个空片段
• 用常规方法（如 appendChild、append、innerHTML）往片段里添加元素或文本
• 把整个片段一次性插入到目标父节点中（片段插入后自动清空，不可复用）

示例：批量创建 100 个列表项

API Documentation Generator

从代码生成全面的 API 文档，提取 Express、FastAPI、Django、Rails等框架的端点、参数、响应模式及示例。

下载

const frag = document.createDocumentFragment();
const ul = document.getElementById('myList');

for (let i = 0; i 

<h3>配合 innerHTML 或模板字符串更简洁</h3>
<p>如果内容是结构化 HTML 字符串，可先设 <code>frag.innerHTML</code>（注意：<code>DocumentFragment</code> 本身不支持 <code>innerHTML</code>，但可以借助临时元素中转）：</p>
<pre class="brush:php;toolbar:false;">const frag = document.createDocumentFragment();
const temp = document.createElement('div');
temp.innerHTML = Array.from({ length: 100 }, (_, i) => 
  `

Item ${i + 1}

` ).join(''); // 把 temp 的子节点移入 frag while (temp.firstChild) { frag.appendChild(temp.firstChild); } document.getElementById('myList').appendChild(frag);

或者更现代写法（兼容性稍好）：

const frag = document.createDocumentFragment();
const html = Array.from({ length: 100 }, (_, i) => 
  `

Item ${i + 1}

` ).join(''); const temp = document.createElement('template'); temp.innerHTML = html; frag.append(...temp.content.childNodes); document.getElementById('myList').append(frag);

注意点和常见误区

片段只能插入一次：插入后自动清空，再次 append 不会报错但什么也不发生。
不能用 querySelector 直接查片段：需先挂载或改用 temp.content.querySelector（搭配 <template></template>）。
与 createDocumentFragment() 等价的现代替代？ 目前没有完全等效的原生新 API，但 <template></template> 元素配合 content 属性功能高度重叠，且支持 innerHTML，实际项目中常混用。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南