用 document.createdocumentfragment() 批量构建节点再一次性插入，能将多次重排重绘压缩为一次，性能提升显著，尤其在循环创建 10+ 个 dom 节点时就值得用。
直接说结论：用 document.createDocumentFragment() 批量构建节点再一次性插入，能将多次重排重绘压缩为一次，性能提升显著，尤其在循环创建 10+ 个 DOM 节点时就值得用。
为什么 document.createDocumentFragment() 能避免重排重绘
DocumentFragment 是一个“离屏”节点，它不挂载在真实 DOM 树中。对它的任何操作（appendChild、insertBefore）都不会触发浏览器计算样式、布局或重绘。而每次往真实 DOM（比如 document.body 或某个 ul）里 appendChild 一个新节点，都可能触发一次重排——尤其是当父容器已有样式、浮动、flex 等布局逻辑时。循环 100 次，就是潜在的 100 次重排；换成 Fragment，就是 1 次插入、1 次重排。
它不是虚拟 DOM，也不依赖框架，是原生 API，所有现代浏览器（包括 IE9+）都支持。
常见错误：把 DocumentFragment 当字符串或 innerHTML 容器用
这些写法完全无效，且容易卡住逻辑：
-
fragment.innerHTML = '<div>hello</div>'→DocumentFragment不支持innerHTML，赋值无效果 -
el.innerHTML += fragment→fragment.toString()返回[object DocumentFragment]，结果是拼了个字符串，节点根本没插入 -
new DocumentFragment()→ 直接报错，必须用document.createDocumentFragment() - 插入后继续复用同一个 fragment 变量 → 插入完成即清空，再次
appendChild会静默失败（什么也不加）
正确创建和填充 DocumentFragment 的两种常用路径
核心原则：所有节点必须通过 document.createElement() 或解析临时容器生成，再移入 fragment。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
✅ 场景一：你有数据数组，要生成一批同构节点（如 li 列表）
const data = ['Apple', 'Banana', 'Cherry'];
const fragment = document.createDocumentFragment();
for (const item of data) {
const li = document.createElement('li');
li.textContent = item;
fragment.appendChild(li); // 追加到 fragment，非真实 DOM
}
document.getElementById('myList').appendChild(fragment); // 仅此处触发真实 DOM 修改
✅ 场景二：你有一段 HTML 字符串（如后端返回或模板拼接），需安全解析
const html = '
⚠️ 注意：temp.innerHTML 本身会触发一次解析，但它是离屏的，不影响页面渲染；且 firstChild 移动是高效 DOM 操作，不是克隆。
插入后 fragment 自动清空，别指望它还能用
这是最容易被忽略的一点：appendChild(fragment) 不是复制节点，而是“转移”所有权。插入完成后，fragment.childNodes.length 为 0，它变成空壳。如果后续还要批量插入另一组节点，必须重新调用 document.createDocumentFragment() 创建新实例。
没有缓存、不可复用、不保留引用——它就是一个一次性高性能中转站。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
