在线运行环境需用 DocumentFragment 批量插入节点，因其能将多次回流压为一次，避免 innerHTML 引发的重复解析、XSS 风险及事件丢失；配合 requestAnimationFrame 可防主线程阻塞。
直接用 document.createDocumentFragment() 批量组装节点再一次性插入，能将 N 次回流压成 1 次——在线运行环境（如 JSFiddle、CodePen、自建 HTML 沙箱）中插入 50+ 节点时，这招就该上了。
为什么在线运行环境特别需要 DocumentFragment
在线运行器通常把用户代码注入到 iframe 或 sandboxed div 中执行，DOM 更新常伴随样式重计算（尤其用了 CSS-in-JS、动态 class、flex/grid 布局），而这类环境主线程更敏感：一次长循环 + 多次 appendChild 很容易卡住预览区、拖慢输入响应。DocumentFragment 把所有操作“离线化”，不触发任何布局，直到最后一刻才交还给真实 DOM。
- iframe 内的 document 也是完整 DOM 环境，
document.createDocumentFragment()完全可用，无需特殊适配 - 很多在线编辑器默认启用
contenteditable或实时高亮，频繁 DOM 修改会加剧冲突；fragment 避免中间态污染 - 沙箱里常禁用
eval和内联事件，innerHTML拼接风险更高，而 fragment 天然走安全节点创建路径
常见错误：在在线环境里误用 innerHTML 替代 fragment
看到“批量插入”就下意识写 el.innerHTML += '<li>...</li>' —— 在线运行场景下这是高危操作：
-
innerHTML +=每次都清空旧内容、重新解析整段 HTML，对 100 行列表就是 100 次解析 + 100 次回流 - 用户输入的变量若未严格转义（比如从 prompt 或 textarea 读取），直接拼进
innerHTML就是 XSS 入口 - 在线环境常带调试面板，
innerHTML覆盖后丢失已有事件监听器或 dataset，而 fragment 可复用已创建节点
正确做法是：用 document.createElement() 创建每个节点，设 textContent 或白名单属性，再 frag.appendChild()。
立即学习“前端免费学习笔记（深入）”；
如何在循环中安全构建 fragment（含字符串模板场景）
用户常传入 HTML 字符串（如 Markdown 渲染结果、后端返回片段），但 DocumentFragment 不支持 innerHTML，得绕一下：
- 别写
frag.innerHTML = htmlString→ 无效，且静默失败 - 用临时
div解析：const temp = document.createElement('div'); temp.innerHTML = htmlString; - 再逐个移出子节点：
while (temp.firstChild) frag.appendChild(temp.firstChild); - 注意：如果字符串含
<tr>，不能直接塞进frag后 append 到<table>，必须先 append 到<tbody>，否则浏览器会自动包裹，破坏结构
示例：
const html = '<li>A</li><li>B</li>';<br>const temp = document.createElement('div');<br>temp.innerHTML = html;<br>const frag = document.createDocumentFragment();<br>while (temp.firstChild) {<br> frag.appendChild(temp.firstChild);<br>}<br>document.getElementById('list').appendChild(frag);
配合 requestAnimationFrame 防止阻塞在线预览帧率
在线运行器的预览区常和编辑器共用主线程，插入上千节点即使用了 fragment，同步 appendChild 仍可能卡住滚动或光标响应。此时加一层 requestAnimationFrame 是稳妥选择：
- fragment 组装必须在 rAF 外完成（它是纯内存操作，无开销）
- rAF 回调里只做一件事：
parent.appendChild(frag)，不要加其他逻辑 - 避免在 rAF 里读取
offsetHeight或getComputedStyle，否则强制同步回流，白优化 - 如果用户连续触发（如快速点击“运行”多次），需防重复插入：插入前检查
frag.hasChildNodes()，或用标志位控制
真正容易被忽略的是：fragment 插入后自动清空，且不可克隆复用。每次运行都要重新 document.createDocumentFragment() —— 这不是性能浪费，而是行为契约。
