直接循环插入会卡顿，因为每次appendchild等操作都触发样式计算、布局和绘制，叠加开销导致主线程长时间占用；而documentfragment是不挂载的虚拟容器，向其添加节点不触发重排重绘，最后一次性插入可显著提升性能。
用 document.createDocumentFragment 可以把多次 DOM 插入合并成一次，避免浏览器反复重排重绘，从而显著缓解卡顿。
为什么直接循环插入会卡顿
每次调用 appendChild、insertBefore 等方法向真实 DOM 添加节点时，浏览器都可能触发样式计算、布局（reflow）和绘制（repaint）。如果一次性插入几百上千个节点，这些开销会叠加，主线程被长时间占用，页面就“卡住”了。
DocumentFragment 是一个轻量的、不挂载到页面的“虚拟容器”，它没有父节点，也不参与渲染流程。往它里面添加子节点，不会触发任何布局或绘制。
DocumentFragment 的正确用法
核心思路：先创建 fragment，把所有要插入的节点先加进去，最后只执行一次真实 DOM 插入。
- 用
document.createDocumentFragment()创建空 fragment - 用循环或批量逻辑生成元素（如
document.createElement），然后fragment.appendChild(element) - 循环结束后，只调用一次
container.appendChild(fragment)
示例：
const fragment = document.createDocumentFragment();
const container = document.getElementById('list');
for (let i = 0; i
配合其他优化效果更好
DocumentFragment 是基础优化，但面对超大数据量（如上万条），还需组合使用：
-
分片渲染：用
requestIdleCallback或setTimeout拆分成小批次插入，避免单次 JS 执行过长 - 减少元素复杂度：避免在循环中绑定事件、设置内联样式或访问 offsetTop 等触发强制同步布局的属性
-
用 innerHTML 替代 createElement（谨慎）：对纯静态结构，拼接字符串后一次性设
innerHTML通常更快，但要注意 XSS 和事件丢失问题
注意不要误用
DocumentFragment 本身不能被直接插入到另一个 fragment 中（虽然语法不报错，但无效）；它只能作为真实 DOM 节点的子节点插入一次。插入后 fragment 会清空，不能再复用。
另外，它不解决事件委托缺失、内存泄漏或 CSS 过度重绘等问题——这些得靠事件代理、合理销毁引用、CSS 层叠优化等手段配合。
