documentfragment 能减少重排重绘，因为它不绑定页面、不触发渲染，所有操作在内存中完成，仅最终插入真实 dom 时才一次性布局和绘制；而直接循环插入会频繁触发重排重绘。

使用 documentFragment 批量插入节点，核心在于「把多个节点先离线组装好，再一次性挂载到真实 DOM」，从而避免每次插入都触发浏览器重排（reflow）和重绘（repaint）。

为什么 documentFragment 能减少重排重绘

documentFragment 是一个轻量级的、不绑定到页面的 DOM 容器。它不会被渲染，也不在文档流中，对它的操作（如 appendChild、append）完全在内存中进行，不触发任何布局计算或绘制。只有当它被添加到真实 DOM 时，浏览器才按最终结构做一次性的布局和绘制。

对比直接循环插入：每调用一次 element.appendChild(child) 到真实 DOM，若该元素已挂载，浏览器可能立即计算样式、布局，尤其在子元素带尺寸/定位/伪类等影响布局的属性时，容易频繁重排。

典型用法：创建 fragment → 批量添加节点 → 一次插入

下面是一个常见场景：动态生成 100 个列表项并插入到 <ul></ul> 中。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

✅ 推荐写法（使用 DocumentFragment）：

const ul = document.querySelector('ul');
const fragment = document.createDocumentFragment();

for (let i = 0; i 

<h3>现代写法兼容性与小技巧</h3>
<p>ES6+ 可结合 <code>Array.from</code> 或展开语法提升可读性，仍保持高效：</p>

• 用 fragment.append(...nodes) 替代多次 appendChild，更简洁（注意 IE 不支持 append，需考虑兼容性）
• 可先用数组收集元素，再一次性 fragment.append(...array)
• 如果要插入 HTML 字符串，建议仍用 createElement + textContent，避免 XSS；若必须解析 HTML，可用 template.innerHTML = str + template.content.cloneNode(true)，再 append 到 fragment

哪些情况它帮不上忙？

documentFragment 无法避免以下开销：

• 节点创建本身（createElement）仍有内存分配成本，但远小于重排
• 如果插入后立即读取布局信息（如 offsetHeight），浏览器仍会强制同步重排——应尽量避免「读写交替」
• 插入目标父元素本身处于隐藏状态（display: none）或文档外，此时即使不用 fragment，浏览器也可能跳过重排；但 fragment 依然推荐，逻辑更稳定

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