DocumentFragment 批量插入节点可将 N 次重排压缩为 1 次，提升渲染性能；适用于向已挂载容器追加多个同级子节点，如向已存在的 ul 动态添加大量 li；标准三步为创建片段、填充节点、一次插入；相比 innerHTML 更安全、稳定且不破坏事件监听器。
用 DocumentFragment 批量插入节点，核心是把多次 DOM 挂载操作“挪到内存里做”，只在最后一步真正触达真实 DOM。这样就把原本可能 N 次的重排，压成 1 次，页面渲染立刻顺滑不少。
什么时候必须用 DocumentFragment
当你需要往一个已经挂载在页面上的容器里追加多个同级子节点时，DocumentFragment 就不可替代。比如向已存在的 <ul id="list"> 里动态添加 1000 个 <li>，逐个 appendChild 就会反复触发重排——哪怕浏览器会做一定合并，开销依然巨大。
- ✅ 正确场景：向已渲染的
document.getElementById('list')追加新项 - ❌ 不必要场景：先创建
ul，再循环建li并ul.appendChild(li)，最后把整个ul插入页面——此时ul是单个挂载点，内部构建全程离线，本身已高效
标准三步写法
记住“建片段 → 填内容 → 一次插”这个节奏，不难，但容易漏掉中间一步：
- 调用
document.createDocumentFragment()创建一个内存中的空容器 - 循环中用
document.createElement()创建每个节点，设置textContent或安全属性（避免 innerHTML），然后fragment.appendChild(node) - 最后只执行一次真实插入：
container.appendChild(fragment)
注意：fragment.appendChild() 不触发任何重排，只有最后那一次挂载才真正走渲染流水线。
Document to PDF
下载
通过PDFAPIHub云API将office文档（DOCX、DOC、PPT、PPTX、XLS、XLSX、CSV、TXT、ODT、RTF）转换为PDF，文档上传至pdfapihub.com完成转换。
立即学习“Java免费学习笔记（深入）”；
为什么比 innerHTML 更适合在线环境
在 CodePen、JSFiddle 或自建沙箱这类在线运行环境中，DocumentFragment 的优势更明显：
- 不解析 HTML 字符串，规避 XSS 风险（用户输入不用手动转义）
- 不销毁已有事件监听器或
dataset，避免交互逻辑丢失 - 不重复触发样式计算，尤其在用了 flex/grid 或 CSS-in-JS 的场景下更稳
- 主线程更干净，不会因长循环 + 多次挂载导致预览区卡死或编辑器响应变慢
搭配 requestAnimationFrame 防阻塞
如果批量节点数特别大（比如 5 万+），光靠 fragment 还不够——JavaScript 循环本身可能阻塞主线程，造成输入延迟或动画掉帧。这时可以分片处理：
- 每次只处理 1000 个节点，生成一个 fragment 并插入
- 用
requestAnimationFrame或setTimeout(..., 0)让出主线程，保证页面可响应 - 适用于日志流、实时列表、语法高亮等持续追加场景
