documentfragment 用于离线组装 dom 节点以避免反复重排，不支持 innerhtml；需用 createelement 或 domparser 构建节点后 append；插入前应隐藏父容器以彻底关闭渲染；replacechildren() 是更优替代但兼容性有限；构建中严禁读取布局信息。
DocumentFragment 不是用来“合并 HTML 片段”的，它根本不会解析字符串、也不处理 HTML 结构；所谓“碎片化合并”，本质是把多个 DOM 节点先离线组装好，再一次性挂载——避免浏览器在循环中反复触发重排。
DocumentFragment 为什么不能用 innerHTML 初始化
你不能对 DocumentFragment 赋值 innerHTML，它没有 innerHTML 属性（读写都会报错或静默失败）。它的作用域纯属 DOM 节点级，只接受 appendChild()、append() 等节点操作。
- 常见错误：
frag.innerHTML = '<div>text</div>'→ 报TypeError: Cannot set property 'innerHTML' of #document-fragment - 正确做法：必须用
document.createElement()或document.createTextNode()构建节点，再塞进frag - 如果已有 HTML 字符串，得先用
DOMParser解析成文档片段，再把body子节点逐个 append 到frag，不能跳步
批量插入前必须关闭渲染通道
哪怕用了 DocumentFragment，只要父容器还在渲染树里，插入瞬间仍会触发 layout 和 paint。真正压住重排的，是让浏览器“看不见”中间过程。
- 插入前设
parent.style.display = 'none'，插入后立刻恢复 —— 这比任何 JS 优化都直接有效 - 若父容器有 CSS 动画或 transition，记得临时加
parent.style.pointerEvents = 'none'防止鼠标悬停打断 - 不要依赖
visibility: hidden：它不移出渲染树，仍参与布局计算，无法规避重排
replaceChildren() 是更安全的替代方案，但有兼容边界
replaceChildren() 在 Chrome 120+ / Safari 17.4+ 支持，它能直接替换子节点而不清空事件监听器，比 innerHTML = '' + appendChild(frag) 更干净。
- 支持传入多个节点或一个
DocumentFragment：el.replaceChildren(frag) - 不支持老浏览器（如 Firefox 115 及更早）：需降级为
el.innerHTML = ''后再el.appendChild(frag)，且确保frag已构建完毕 - 注意：它会移除所有现有子节点并销毁其绑定的事件监听器（除非监听器挂在父级并用事件委托）
最容易被忽略的“读写混合”陷阱
很多卡顿不是出在插入动作本身，而是在 fragment 构建过程中偷偷读了布局信息——哪怕只是 console.log(el.offsetHeight)，也会强制 flush 渲染队列，让整个离线优势归零。
- 绝对禁止在循环内调用：
offsetTop、getBoundingClientRect()、getComputedStyle()、clientWidth - 需要测尺寸？等
frag插入真实 DOM 后，在requestAnimationFrame()回调里读 - 需要按顺序插入并保留状态（如 checkbox 的
checked）？别用innerHTML拼接字符串，用 fragment 构建真实节点并显式拷贝dataset、checked、value等属性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
