documentFragment 能减少渲染压力，因其是不渲染的轻量容器，添加子节点时不触发重排重绘，仅在挂载时一次性完成布局和绘制。
使用 document.createDocumentFragment 批量插入节点，核心在于“把多个 DOM 操作先集中到内存中的片段里完成，再一次性挂载到真实 DOM”，从而避免频繁触发重排（reflow）和重绘（repaint），显著减轻渲染引擎负担。
为什么 documentFragment 能减少渲染压力
DocumentFragment 是一个轻量的、不直接属于主 DOM 树的容器节点。它不会被渲染，也不触发样式计算或布局。向它添加子节点时，浏览器完全跳过渲染流水线；只有当它被 append 到真实 DOM 时，才进行一次整体插入——此时浏览器通常只触发一次 layout 和 paint。
对比直接循环 appendChild 到页面元素：每插入一个节点，若该操作影响几何尺寸或样式依赖（如块级元素、浮动、flex 项等），都可能强制浏览器同步计算布局，造成多次重排。
典型批量插入写法（含关键细节）
以下是最常用且安全的模式，适用于动态生成列表、表格行、卡片组等场景：
- 先调用
document.createDocumentFragment()创建空片段 - 用循环或映射生成所需节点（
document.createElement或template.content.cloneNode(true)） - 全部
append或appendChild到 fragment（注意：fragment 支持append()、appendChild()，但不支持innerHTML） - 最后将整个 fragment 插入目标容器（如
container.append(fragment)）
示例：
const fragment = document.createDocumentFragment();
const data = ['苹果', '香蕉', '橙子'];
data.forEach(text => {
const li = document.createElement('li');
li.textContent = text;
fragment.appendChild(li); // 只操作 fragment，无渲染
});
// 一次性插入
document.getElementById('list').appendChild(fragment);
配合 template 元素提升可维护性
当结构较复杂（含多层嵌套、属性、事件占位等），推荐搭配 <template> 使用。它天然惰性，内容不会被解析或执行，适合做 HTML 模板。
- 定义
<template id="item"><div class="card"><h3></h3><p></p></div></template> - 在 JS 中用
template.content.cloneNode(true)复制一份干净副本 - 填充数据后 append 到 fragment
- 避免手动拼接字符串（防止 XSS）和重复创建相同结构
现代替代方案与适用边界
DocumentFragment 在所有主流浏览器中稳定支持，仍是 DOM 批量插入的黄金标准。不过要注意：
- 对纯文本或简单节点，性能差异微乎其微，不必过度优化
- 若使用框架（React/Vue/Svelte），它们内部已做类似优化，无需手动干预
- 大量节点（如上万条）仍建议分页、虚拟滚动或
requestIdleCallback控制节奏，仅靠 fragment 无法解决卡顿 -
innerHTML += ...或循环设innerHTML会反复销毁重建子树，比 fragment 慢数倍且有安全风险
本质上，fragment 不是银弹，而是把“多次小更新”压缩为“一次大更新”的务实手段。只要插入动作超过 3–5 个节点，就值得用。
