documentfragment 是不属 dom 树的轻量级文档对象，操作它不会触发重排重绘；需用 document.createdocumentfragment() 创建，通过 createelement + appendchild 或临时 div 解析 html 字符串后移入，再用 appendchild/insertbefore 一次性插入真实 dom。

DocumentFragment 是什么，为什么它能避免重排重绘

DocumentFragment 是一个轻量级的文档对象，它不直接属于 DOM 树，因此对它的操作（如 appendChild、insertBefore）不会触发浏览器的布局计算或样式重排。当你在循环中反复 appendChild 到真实 DOM 节点时，每次都会可能触发重排；而先批量操作 DocumentFragment，再一次性插入，就把多次重排压缩成一次。

关键点在于：它不是“虚拟 DOM”，也不需要框架支持，是原生 API，所有现代浏览器都支持。

如何正确创建并填充 DocumentFragment

不要用 document.createDocumentFragment() 后再手动 cloneNode 或 innerHTML 赋值——DocumentFragment 不支持 innerHTML，设了也没用；也不能直接用 new DocumentFragment()（会报错）。

推荐做法是：

• 用 document.createDocumentFragment() 创建空片段
• 用 document.createElement() 创建每个子节点，再 fragment.appendChild(element) 追加
• 如果已有 HTML 字符串，需先用临时 div 解析，再把子节点移入 fragment（不能用 innerHTML 直接写到 fragment）

示例（安全解析字符串）：

const html = '

A

B

'; const temp = document.createElement('div'); temp.innerHTML = html; const fragment = document.createDocumentFragment(); while (temp.firstChild) { fragment.appendChild(temp.firstChild); }

插入时必须用 appendChild 或 insertBefore，不能用 innerHTML

常见错误是把 fragment 当作字符串拼接容器，然后试图 parent.innerHTML += fragment——这完全失效，因为 fragment.toString() 返回 [object DocumentFragment]，不是 HTML 文本。

正确插入方式只有两种：

• parent.appendChild(fragment)（最常用）
• parent.insertBefore(fragment, refNode)（指定位置插入）

注意：fragment 插入后自动清空，再次使用需重新创建；它不保留对原始节点的引用，插入即“转移”节点所有权。

和 innerHTML 对比：何时该选 DocumentFragment

如果你只是静态插入已知结构的 HTML 字符串，innerHTML 更快、更简洁；但只要涉及动态创建、需绑定事件、要复用节点、或需精确控制元素实例（比如给每个 li 设置不同 dataset），DocumentFragment 就不可替代。

性能差异在几百个节点以上才明显；少于 20 个节点时，两者的差距几乎感知不到，别过早优化。

容易被忽略的一点：fragment 本身不触发事件冒泡，也不参与 CSS 选择器匹配——它只是中转站，所有样式和事件必须在插入 DOM 后才生效。