createcontextualfragment是浏览器原生api，可将html字符串直接转为documentfragment，性能比jquery高30%以上，复用当前文档上下文解析，避免重排重绘，但需确保html合法且防范xss。
createContextualFragment 是浏览器原生提供的高效 DOM 解析方法，它能将 HTML 字符串直接转换为 DocumentFragment，无需经过 innerHTML、临时容器或 DOM 操作链，性能远超传统方案。关键在于它复用当前上下文（如某个元素的 parser），避免完整文档解析开销，且返回的是纯净、可直接 append 的节点片段。
核心用法：一行代码生成可挂载节点
只需调用任意 Element 或 Document 上的 createContextualFragment 方法，传入合法 HTML 字符串即可：
- 必须在有上下文的环境中调用（不能直接在 Document 上调用，除非是 document.implementation.createHTMLDocument() 创建的文档）
- 推荐从目标挂载点的父元素上调用，确保解析上下文与目标环境一致（如表单、SVG、shadow root 中的语义正确）
- 返回值是 DocumentFragment，可直接用
appendChild、append或replaceChildren挂载
示例：
const parent = document.getElementById('container');const fragment = parent.ownerDocument.createRange().createContextualFragment('
Hello
World');parent.append(fragment);
为什么比 innerHTML + tempDiv 快？
传统 innerHTML 方式需创建临时容器、设 innerHTML、取子节点、清空容器——涉及多次 DOM 树重排与内存分配。而 createContextualFragment：
- 跳过容器创建和 innerHTML 赋值，无副作用 DOM 节点产生
- 底层直接调用 HTML 解析器，输出即为轻量 DocumentFragment（无父节点、不触发样式计算）
- 在大量动态插入场景（如列表渲染、消息气泡）中，实测提升 30%~60% 插入性能（尤其在低端设备）
安全前提：只用于可信 HTML 字符串
该方法不自动转义，不防范 XSS，等同于 innerHTML 的原始解析行为：
- 若字符串来自用户输入或外部 API，必须先手动转义（如用
textContent创建文本节点包裹，或使用 DOMPurify 过滤） - 适合服务端模板预渲染后传入的静态结构、配置驱动的 UI 片段、或已严格校验的内部 DSL 输出
- 可封装一层安全工厂函数，例如：
function safeFragment(html, doc = document) {
return doc.createRange().createContextualFragment(DOMPurify.sanitize(html));
}
兼容性与降级建议
现代浏览器（Chrome 12+、Firefox 4+、Safari 5.1+、Edge 12+）均支持。若需兼容 IE，需降级：
- IE 不支持 createContextualFragment，但支持
range.createContextualFragment（需先 createRange） - 稳妥写法：统一用
document.createRange().createContextualFragment(str)，所有支持浏览器都认此路径 - 极老环境可 fallback 到临时 div + innerHTML + moveChild，但仅作兜底，非默认路径
