document.createdocumentfragment() 是一次性离线容器，用于批量插入节点以减少重排；必须每次新建、不可复用，插入后自动清空；不支持 queryselector 和 innerhtml；从 template 克隆需用 clonenode(true)；构建 fragment 前不可读取布局信息，否则离线优势失效。
直接用 document.createDocumentFragment() 渲染组件，不是为了“提速”，而是避免浏览器在节点插入过程中反复触发 layout —— 只要你批量创建节点、只做一次真实 DOM 插入，就能把 N 次重排压成 1 次。
document.createDocumentFragment() 必须每次新建
它不是可复用的缓冲区，而是一个一次性离线容器。插入后自动清空，继续调用 frag.appendChild(node) 不会报错，但节点不会被添加（frag.firstChild 始终为 null）。
- ✅ 正确写法：
const frag = document.createDocumentFragment()放在循环前，且每次渲染都新建 - ❌ 错误写法：全局缓存一个
frag实例，在多次组件更新中重复使用 - ⚠️ 隐患：在
frag插入后还尝试读取frag.childNodes.length，结果永远是0，容易掩盖逻辑错误
不能对 DocumentFragment 调用 querySelector 或设 innerHTML
DocumentFragment 不参与渲染管线，不挂载到 document，因此没有 CSSOM 匹配能力，也不支持 HTML 解析。
- ❌
frag.querySelector('button')→ 返回null，且不报错，极易误判 - ❌
frag.innerHTML = '<div>test</div>'→ 静默失败，frag仍为空 - ✅ 查找或绑定事件，必须等
container.appendChild(frag)完成后再操作真实 DOM
从 template 克隆节点时，别漏掉 cloneNode(true)
直接把 template.content append 进 fragment，等于把同一个 DocumentFragment 实例反复移动——所有后续操作都指向同一组节点引用，导致状态混乱、事件绑定错位、内存滞留。
- ✅ 正确：
const node = template.content.cloneNode(true)，再frag.appendChild(node) - ❌ 错误：
frag.appendChild(template.content)（template.content是只读引用，移动后变空） - ⚠️ 注意：
cloneNode(true)会深拷贝 dataset 和属性，但不复制事件监听器；如需保留监听器，得手动重新绑定
异步组件中 fragment 构建时机比插入时机更关键
很多人以为把 appendChild(frag) 包进 requestAnimationFrame 就万事大吉，其实只要在构建 fragment 前读了 offsetHeight 或 getComputedStyle，浏览器就会提前 flush layout，fragment 的“离线性”就废了。
- ✅ 推荐顺序：fetch 完数据 → 立即
createDocumentFragment()→ 循环createElement+appendChild→ 最后requestAnimationFrame(() => container.appendChild(frag)) - ❌ 危险操作：在
for循环里每轮都读container.scrollHeight，哪怕目标是别的元素，也会让 fragment 失效 - ⚠️ 特别注意：在线沙箱环境（如 CodePen）中，iframe 内 DOM 更敏感，这种提前 layout 极易卡死预览区
真正容易被忽略的，不是“怎么插”，而是“插之前做了什么”——哪怕只读一次布局信息，整个 fragment 的离线优势就归零。它不靠聪明算法，只靠严格隔离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
