HTML本身无标签页缓存机制，所谓状态保持实为JavaScript控制DOM显隐或用hidden属性暂停资源加载；真状态缓存应依赖sessionStorage或Map存储关键数据并还原UI。
HTML 本身没有“标签页缓存”机制，所谓“切换标签页时保持状态”，实际是靠 JavaScript 控制 DOM 显示/隐藏，或用 display、visibility、hidden 属性配合逻辑实现；直接用多个 <iframe></iframe> 或反复 innerHTML 替换内容会丢状态、触发重渲染、破坏表单输入——这不是缓存，是反复销毁重建。
为什么用 display: none 不等于“缓存”
视觉上隐藏的 DOM 节点（如 display: none）确实保留在内存中，但有明显副作用：
- 所有绑定的事件监听器、定时器、
IntersectionObserver实例仍活跃，可能造成内存泄漏或意外触发 - 表单元素（
<input>、<textarea></textarea>）值虽保留，但focus状态丢失，光标位置、选区信息不恢复 - 第三方库（如富文本编辑器、图表库）常依赖
resize、scroll或挂载生命周期，display: none后再显示往往需手动reflow或重初始化 - 大量隐藏 DOM 会拖慢页面整体性能，尤其在低端设备上
用 hidden 属性 + visibility: hidden 更可控
hidden 是原生 HTML 属性，语义明确，且浏览器会暂停其内部资源加载（如 <video></video> 暂停、<iframe></iframe> 卸载），比纯 CSS 隐藏更干净：
<div id="tab1" hidden>...</div> <div id="tab2">...</div>
切换时只需：
document.getElementById('tab1').hidden = true;
document.getElementById('tab2').hidden = false;
注意：hidden 不影响 CSS 布局流（类似 visibility: hidden），若需彻底脱离文档流，再加 position: absolute; left: -9999px 等辅助样式。避免混用 hidden 和 display: none，否则行为不可预测。
需要真“状态缓存”？用 sessionStorage 或 Map 存关键数据
如果标签页内有复杂交互（如筛选条件、滚动位置、未提交表单），DOM 保留反而不是最优解。更可靠的做法是：
- 监听
beforeunload或 tab 切出事件（如visibilitychange），把必要字段序列化存进sessionStorage - 切换回来时，从
sessionStorage读取并还原 UI 状态（而非 DOM） - 对长列表或 Canvas 图表等重型内容，可只存参数（如
offset、filter），切换时按需重新渲染 - 避免存整个 DOM 字符串或函数引用——
sessionStorage只支持字符串，JSON 序列化会丢函数、Date、RegExp 等类型
SPA 路由场景下别碰 document.write 或 innerHTML 替换
在 React/Vue/Angular 等框架中，用路由切换模拟标签页时，常见错误是手动清空容器再 innerHTML = newContent：
- 这会销毁所有已挂载组件实例，
useEffect、mounted等钩子不会自动重跑 - 第三方 SDK（如埋点、广告）可能被重复加载或丢失上下文
- 正确做法是让框架管理组件生命周期：用
keep-alive（Vue）、React.memo+ 自定义 Hook 或useMemo缓存渲染结果 - 若必须手写，至少用
replaceChildren()替代innerHTML，保留部分节点引用
真正难的不是“怎么藏起来”，而是“藏的时候哪些东西必须留、哪些必须清、哪些该记下来”。DOM 是载体，状态才是核心——别让视觉切换绑架了数据逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
