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

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

为什么用 DocumentFragment？

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

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

步骤很直接：

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

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

Expanso json-flatten

通过 CLI 或 MCP 服务器，使用 Expanso Edge 管道扁平化嵌套 JSON 对象。

下载

frag.innerHTML

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（搭配 ）。
与 createDocumentFragment() 等价的现代替代？ 目前没有完全等效的原生新 API，但 元素配合 content 属性功能高度重叠，且支持 innerHTML，实际项目中常混用。

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