documentfragment 是让重绘只发生一次的关键开关，它作为纯内存 dom 容器不参与样式计算，插入时仅触发一次 layout 和 paint，相比 innerhtml 更安全、可控且能保留动态状态。
直接渲染上千条列表项，不是卡在“画不出来”，而是浏览器反复销毁重建节点、计算样式、触发重绘——DocumentFragment本身不降低重绘，但它是让重绘只发生一次的关键开关。
为什么用 DocumentFragment 而不是直接 innerHTML 批量写入
两者都能避免循环中逐个 appendChild() 导致的多次重排，但行为差异明显：
-
innerHTML = str会清空原有事件监听器（尤其旧版 IE），且若字符串含用户输入内容，有 XSS 风险；现代浏览器虽已优化，但无法控制解析细节 -
DocumentFragment是纯内存 DOM 容器，不挂载时不参与任何样式计算或布局，插入时浏览器只做一次 layout 和 paint - 当列表项含动态状态（如 checkbox 选中、展开折叠），用
innerHTML会丢失这些本地状态；而用 fragment 构建新节点再替换，可配合保留关键属性（如checked、data-expanded）实现平滑过渡
长列表加载时怎么避免滚动中触发强制重排
哪怕用了 fragment，如果在滚动监听里边读边写，照样卡顿。常见错误是：
- 在
scroll回调里调用getBoundingClientRect()判断是否进入视口，紧接着就fragment.appendChild(item) - 用
offsetTop计算位置后，立刻改item.style.opacity = 1
正确做法是读写分离 + 节流：
- 用
IntersectionObserver替代手动 scroll 监听，它不触发重排，且回调中读取entry.boundingClientRect是安全的 - 所有 DOM 插入操作统一收口到
requestIdleCallback或setTimeout(..., 0)微任务队列，确保不在渲染帧内执行 - 批量插入前先设父容器
style.display = 'none'，插入完成再恢复，彻底跳过中间状态的重绘
replaceChildren() 和 textContent 在片段化中的适用边界
不是所有场景都适合 fragment —— 纯文本更新或局部刷新时，更轻量的 API 反而更稳：
- 只更新列表项内的文字内容？用
item.textContent = newText，比重建整个li节点快得多，且不触发重排 - 整块替换列表区域（比如切分页）？优先用
container.replaceChildren(fragment)，它比innerHTML更安全，也不丢失事件监听器（Chrome 120+ / Safari 17.4+） - 需要兼容老浏览器？退化为
container.innerHTML = ''后再appendChild(fragment)，但必须确保 fragment 已构建完毕，不能边循环边 append
真正难的不是“怎么插入”，而是“什么时候插入”和“插完怎么保状态”。fragment 解决的是 DOM 操作粒度问题，但滚动加载中的状态同步、离屏节点回收、动画衔接，这些才是内存压力真正的来源点——它们不会因为你用了 fragment 就自动消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
