根源是每次路由切换都重建dom节点，导致事件、定时器、表单值等运行时状态清空；须将状态抽离至sessionstorage等持久层，dom仅做class切换或隐藏显示。
路由切换时组件状态丢失的根源
不是 HTML 本身丢状态，而是每次切换都重建 DOM 节点，导致绑定的事件、定时器、IntersectionObserver、表单输入值全被清空。尤其在「用户详情页→编辑页→提交页」这类多步流程中，反复 innerHTML 替换或 replaceChildren() 会直接抹掉所有 JS 运行时状态。
常见现象：点击返回按钮后，表单内容消失、滚动位置重置、开关状态回退到初始值——本质是没把状态从 DOM 层抽离出来。
- 别依赖
element.checked或input.value做唯一状态源，它们只反映当前 UI，不持久 - 避免在路由 handler 里直接
el.innerHTML = template，哪怕模板字符串来自fetch - 如果组件含
canvas、video或第三方库实例（如地图），重建等于重初始化，开销极大
用 sessionStorage + class 切换代替 DOM 重建
对非首屏、结构稳定但需保留状态的组件（如折叠面板、筛选器、多步表单），优先缓存状态到 sessionStorage，DOM 层只做 class 切换，不动节点树。
示例：一个带搜索框和结果列表的页面，路由切换时只隐藏/显示容器，不销毁：
const container = document.getElementById('search-section');
// 切换前保存关键状态
sessionStorage.setItem('searchQuery', input.value);
sessionStorage.setItem('searchFilters', JSON.stringify(filters));
// 切换后恢复
if (sessionStorage.getItem('searchQuery')) {
input.value = sessionStorage.getItem('searchQuery');
filters = JSON.parse(sessionStorage.getItem('searchFilters'));
}
container.classList.toggle('hidden', !isActive);
-
class切换比display: none更轻量，浏览器跳过 layout 计算 - 用
hidden属性或aria-hidden配合 CSS 控制可访问性，别只靠visibility: hidden - 慎用
opacity: 0—— 元素仍占布局空间，且屏幕阅读器可能读取
DocumentFragment 不适合 fetch 返回的 HTML 片段
看到「用 DocumentFragment 提升性能」就往 fetch().then(html => ...) 里硬套，反而引发类型错误或解析错乱。Fragment 只接受 Node，不接受字符串。
正确做法是先解析再迁移：
fetch('/page/profile.html')
.then(r => r.text())
.then(html => {
const doc = new DOMParser().parseFromString(html, 'text/html');
const fragment = document.createDocumentFragment();
// 注意：取 body.children，不是 doc.body —— 后者可能带默认 head/style
Array.from(doc.body.children).forEach(node => fragment.appendChild(node));
app.replaceChildren(fragment);
});
- 别用
doc.documentElement或doc.body.firstChild，parseFromString补全的结构不可控 - 如果返回 HTML 含
<script></script>，它不会执行，和innerHTML一致，别指望自动运行 - 移动端低端 WebView 中，
DOMParser比临时div.innerHTML更稳，但首次解析仍比纯 class 切换慢
深层嵌套组件必须控制 DOM 层级
路由切换卡顿八成不是 JS 慢，而是新视图 DOM 嵌套超 12 层，浏览器重排时递归计算样式爆炸。比如表格内嵌折叠面板，再套表单字段，很容易突破阈值。
实操检查与修复：
- Chrome DevTools → Elements 面板右键节点 → “Show DOM tree depth”（需开启实验功能）
- 用
display: contents替代冗余 wrapper，让子元素“透出”到父级布局流中 - 避免在路由组件里写
<div><div><div><div>...</div></div></div></div>，改用语义化标签或 CSS Grid/Flex 控制结构 - 折叠面板展开时，不要一次性插入整块嵌套 HTML，拆成 Fragment 分批 append，或延迟加载子模块
真正难的不是怎么切，而是判断哪些状态该留在内存、哪些该随路由销毁——比如用户输入必须留，而临时 tooltip 就该清。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
