documentfragment 替换比 innerhtml 更稳，适用于 js 动态生成的批量 dom 插入；处理 fetch 返回的 html 字符串需先用 domparser 解析再注入 fragment，避免直接 innerhtml 赋值或错误 append。
DocumentFragment 替换比 innerHTML 更稳，但得用对地方
直接改 innerHTML 看似简单，但每次赋值都会触发浏览器解析整段 HTML、重建 DOM 子树、重排（reflow）和重绘（repaint）。100 个列表项切换一次，就可能卡顿。而 DocumentFragment 是离线容器，往里塞节点不触发任何渲染流程，最后一次性 appendChild 到真实 DOM，只计算一次布局。
适用场景：路由切换时批量替换整个视图区域（比如 #app 或 .page-container），且内容由 JS 动态生成（非 fetch 返回的原始 HTML 字符串）。
- 别在
fetch().then(html => el.innerHTML = html)场景下强行套用DocumentFragment—— 那是字符串，不是节点，得先用DOMParser解析或插入临时div再取childNodes - 如果替换内容含
<script></script>标签，DocumentFragment不会执行它；innerHTML也不会（除非手动eval），这点两者一致 - 移动端低端 WebView 中，
DocumentFragment的优势更明显，尤其配合will-change: transform做页面级平移时，能避免同步 layout 强制触发
用 DOMParser + DocumentFragment 处理 fetch 回来的 HTML 片段
当路由内容来自 fetch('/page/about.html') 这类外部 HTML 文件时，不能直接把字符串丢进 DocumentFragment。必须先解析成 DOM 节点树，再迁移进 fragment。
错误写法：fragment.appendChild(htmlString) → 类型错误，appendChild 只接受 Node
正确流程：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
new DOMParser().parseFromString(htmlString, 'text/html')得到一个完整文档对象 - 取其
body.firstChild或遍历body.children，把每个子节点appendChild到 fragment - 清空目标容器（
el.textContent = ''或el.replaceChildren()），再el.appendChild(fragment) - 注意：
parseFromString会补全html/head/body，所以别直接取document.body—— 它可能包含你不需要的默认样式或脚本
避免在路由切换中重复创建/销毁大型 DOM 结构
频繁切换「用户详情页」「订单列表页」这类结构复杂、含大量子组件的视图时，反复新建节点成本高，尤其当它们内部绑定了事件、定时器或 IntersectionObserver。
更优策略是复用已存在的 DOM 节点，而非每次都 remove 再 appendChild：
- 给每个路由视图容器加唯一
data-route-id属性（如data-route-id="user-detail"） - 切换前查缓存：
document.querySelector('[data-route-id="user-detail"]')，存在就直接show，不存在再创建并缓存 - 隐藏不用
display: none，而用visibility: hidden+position: absolute，避免重排，同时保留布局上下文 - 慎用
innerHTML = ''清空容器 —— 它会暴力移除所有子节点及绑定事件，应改用while(el.firstChild) el.removeChild(el.firstChild)或el.replaceChildren()（现代浏览器）
服务端返回 HTML 片段时，别让前端再“二次解析”
如果后端已提供干净的 HTML 片段（如只含 <h2>About</h2>
<p>…</p>），前端就不该再用正则提取、再用 DOMParser 包一层 —— 这纯属冗余开销。
真正要防的是 XSS 和结构错乱：
- 若信任后端，直接
el.innerHTML = htmlString最快，现代浏览器对此已高度优化 - 若需过滤，用
DOMPurify.sanitize(htmlString)，它内部用DOMParser+ 白名单，比手写正则安全且快 - 绝对不要写
htmlString.replace(/<script>/g, '<script>')</script>这类“伪过滤”，既不防 XSS，又破坏合法标签 - 注意：Chrome 125+ 对
innerHTML设置含<template></template>的 HTML 有性能 regression，若用到，建议降级为replaceChildren(...)手动构建
最常被忽略的一点：路由切换本身不慢，慢的是切换后立即触发的同步操作 —— 比如在新内容插入后立刻 querySelectorAll('.chart').forEach(initChart)。这些应该延后到 requestIdleCallback 或至少 setTimeout(..., 0)，把控制权还给主线程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
