DocumentFragment用于批量插入节点以避免频繁重排重绘，其核心是离屏组装后一次性挂载。创建碎片→填充节点→单次插入目标容器，可显著提升性能，尤其适用于列表、表格等动态渲染场景。
用 createDocumentFragment 批量插入节点，核心是「把多个节点先塞进一个轻量容器，再一次性挂到真实 DOM 上」，避免反复触发重排重绘，显著提升性能。
为什么需要文档碎片？
直接循环调用 appendChild 插入 100 个元素，浏览器可能在每次插入时都尝试重排（reflow）和重绘（repaint），尤其在父容器已存在样式或布局约束时。而 DocumentFragment 是一个不挂载到页面的“离屏”容器，对它操作不会触发任何渲染开销，等所有子节点加完，再用一次 appendChild 或 append 推入真实 DOM，只触发一次布局计算。
基本用法：创建 → 填充 → 插入
这是最典型的三步流程：
- 调用
document.createDocumentFragment()创建碎片对象 - 用
appendChild、append或innerHTML（需注意 XSS）往碎片里添加节点 - 把整个碎片作为单个节点，插入目标容器（如
ul、div）
示例：
立即学习“Java免费学习笔记（深入）”；
const fragment = document.createDocumentFragment();
const data = ['苹果', '香蕉', '橙子'];
data.forEach(text => {
const li = document.createElement('li');
li.textContent = text;
fragment.appendChild(li); // 不影响真实 DOM
});
document.getElementById('myList').appendChild(fragment); // 仅此一次触发渲染
配合模板字符串或 innerHTML 提升开发效率
如果生成的是纯 HTML 字符串（且内容可信），可结合 innerHTML 快速填充碎片，比逐个 createElement 更简洁：
- 先创建空碎片
- 用
template.innerHTML = htmlString写入（注意：DocumentFragment本身没有innerHTML，需借助临时template元素） - 取
template.content（本质就是DocumentFragment）并插入
推荐写法：
const template = document.createElement('template');
template.innerHTML = data.map(text => `<li>${text}</li>`).join('');
document.getElementById('myList').appendChild(template.content);
✅ template.content 返回的就是一个天然的 DocumentFragment，无需手动创建，且自动解析 HTML、安全提取节点。
适用场景与注意事项
适合批量新增节点的场景，比如渲染列表、动态表格、消息流等；但要注意：
- 文档碎片只能插入一次——插入后自动清空，再次使用需重新创建
- 不适用于「替换」或「移动已有节点」，那是
replaceChild或remove+append的事 - 现代浏览器中，
append(...nodes)和innerHTML在多数情况下也做了内部优化，但文档碎片仍是可控性最强、语义最清晰的方案 - 若节点数量极少（如 ≤ 5 个），性能差异几乎不可测，优先选可读性高的写法
不复杂但容易忽略。关键就三点：离屏组装、一次上树、避免循环直插。
