documentfragment能避免重排是因为它作为离线容器不挂载于真实dom树，对其操作不触发样式计算、布局或绘制，仅在一次性插入时执行一次布局。
DocumentFragment 为什么能避免重排
它不是虚拟 DOM，也不是框架产物，而是浏览器原生的离线容器。调用 document.createDocumentFragment() 创建的对象不挂载在真实 DOM 树中，所以对它的任何 appendChild、insertBefore 操作都不会触发样式计算、布局（reflow）或绘制（paint）。只有当它被一次性插入目标容器（如 ul.appendChild(frag)）时，浏览器才做一次布局——这是性能差异的根本来源。
常见错误现象：for 循环里反复 container.appendChild(div)，在 Chrome DevTools 的 Rendering 面板能看到 Layout 帧密集突起；而用 Fragment 后，Layout 峰值只剩一次。
批量插入 DOM 节点的标准写法
核心就三步：创建 → 填充 → 插入。不能跳步，也不能复用。
- 每次都要用
const frag = document.createDocumentFragment()新建实例，不要缓存或复用已插入过的 fragment（它插入后自动清空） - 所有新节点必须用
document.createElement()或div.cloneNode(true)创建，再frag.appendChild(node)；别直接把已挂载的节点塞进去（会自动从原位置移除） - 最后只调用一次
container.appendChild(frag)，此时 fragment 内容整体迁移，自身变为空 - 如果需多次批量插入（比如分页加载），每次都要新建 fragment，别试图
frag.cloneNode(true)——它克隆出来是空的
innerHTML += 和 DocumentFragment 的关键区别
el.innerHTML += '<li>xxx</li>' 看似省事，实则灾难：每次执行都会强制浏览器先序列化整个子树 → 字符串拼接 → 全量解析重建所有子节点，哪怕只加一行，也会销毁并重建全部已有内容，事件监听器和表单输入值全丢。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
而 DocumentFragment 保留节点引用、事件绑定、用户输入状态，且构建阶段零渲染开销。
适用边界：
- 纯静态 HTML 字符串 + 无交互需求 →
insertAdjacentHTML('beforeend', html)更快 - 需要动态设置属性、绑定事件、调用
focus()或querySelector()→ 必须用DocumentFragment+createElement - 要防 XSS？字符串拼接前务必
escapeHtml()，但更推荐 DOM 方法绕过字符串解析
容易被忽略的性能陷阱
Fragment 不是银弹，以下情况会绕过优化效果：
- 在循环里一边往 fragment 塞节点，一边又读取真实 DOM 的
offsetHeight或getBoundingClientRect()—— 强制同步重排仍会发生 - 误以为
frag.querySelector()能查到刚 append 进去的子元素 —— 实际查不到，它不参与 CSS 选择器匹配，除非已插入 document - 用
frag.innerHTML = 'xxx'——DocumentFragment没有innerHTML属性，会静默失败或报错 - 批量更新已有节点（比如改文本、切 class）时，还傻乎乎删了重建 —— 直接改
textContent或className更轻量
真正影响性能的，从来不是“做了多少次操作”，而是“浏览器被迫同步重排了多少次”。Fragment 把 N 次强制 layout 压缩成一次，这个压缩过程本身不耗时，但省下的 layout 计算量，在复杂样式或低配设备上会非常明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
