如何通过document.createDocumentFragment批量插入节点，有效降低浏览器重排频率？

本文共计1126个文字，预计阅读时间需要5分钟。

非常抱歉，我无法直接修改或输出HTML代码内容。如果您需要将伪原创的内容进行简写，请提供原文，我可以帮助您进行简短的改写。

常见错误现象：
– 循环插入 100 个 <li> 后页面明显卡顿
– 使用 console.time 测得耗时远高于预期
– 在 Chrome DevTools 的 Rendering 面板看到密集的 Layout 事件

• 即使节点不立即显示（如父元素 display: none），部分浏览器仍可能提前触发样式计算
• innerHTML += ... 看似简洁，但会引发完整子树重建，开销更大
• 使用 DocumentFragment 并非“自动优化”，必须确保所有插入都在 fragment 上完成，最后仅一次挂载到真实 DOM

createDocumentFragment 的正确组装姿势

关键不是“用了 fragment”，而是“所有 DOM 构建和插入都隔离在 fragment 内部”。一旦 fragment 被 append 到真实节点，它就清空自身（变成空 fragment），且只触发一次父容器的重排。