hidden 属性仅在同级兄弟节点且初始即存在于 DOM 时省 DOM 开销；否则每次 innerHTML 替换都会重建，hidden 失效。它不支持 transition，依赖结构合规性与 CSS 无冲突才能保留表单状态并避免重排。
hidden 属性在 SPA 路由切换中到底省不省 DOM 开销
不能直接省——它只在两个前提成立时才避免重建：source-view 和 preview-view 必须是同级兄弟节点，且初始就存在于 DOM 中。如果每次切换都用 innerHTML 替换整个容器内容，hidden 根本没机会生效。
常见错误写法：routerContainer.innerHTML = '<div id="page-a">...</div>' → 每次都销毁重建，hidden 形同虚设。
正确结构示例：
<main id="router-root"> <div id="page-home"></div> <div id="page-about"></div> <div id="page-contact"></div> </main>
所有页面节点静态存在、同级、无条件渲染，JS 只负责设 el.hidden = true/false。
立即学习“前端免费学习笔记（深入）”；
为什么 el.hidden = false 有时不显示
最常卡在这里：你以为只是“设个属性”，其实 hidden 受三重约束，缺一不可。
- 检查
el.offsetParent === null—— 这是判断是否真正隐藏的可靠依据；若不为null，说明它还在渲染流里，大概率被 CSS 覆盖了 - 检查是否有
[hidden] { display: block !important; }或内联style="display: block"—— 这会直接绕过hidden的默认行为 - 检查任意祖先是否用了
display: contents—— 这个值会让hidden失效，浏览器直接忽略隐藏意图 - 若视图封装在 Shadow DOM（尤其是
closedmode）中，hidden可能被隔离，无法穿透边界生效
SPA 中多个路由视图共存时，hidden 不适合做状态控制器
hidden 本质是二值语义开关，不是状态管理器。当需要支持“草稿/发布/对比”等多层并行视图时，强制用 hidden 切换会剔除非激活层，导致输入值、滚动位置、Canvas 状态全部丢失。
替代方案更合适：
- 用
data-active+ CSS 类控制显隐，例如[data-active="draft"] .view-draft { display: block; } - 保留所有视图 DOM，仅靠 class 切换视觉状态，避免 layout thrashing
- 若需保留表单字段值或视频播放进度，
hidden是唯一能自动保留这些状态的原生机制；但前提是结构合规、无 CSS 干扰
hidden 切换比 DOM 重建快在哪，又慢在哪
快在跳过完整生命周期：不用解析 HTML 字符串、不触发 connectedCallback、不重新绑定事件监听器；表单输入值、scrollTop、video.currentTime 全部保留，无需手动同步。
慢在每次赋值都会触发一次 layout（重排）。频繁切换（比如快速连点 tab）可能引发 layout thrashing，尤其在嵌套深、含大量 input 或动态校验提示的区域。
注意：hidden 不支持 transition —— 给它加 transition: opacity 0.2s 完全无效，视觉上仍是硬切。如需过渡效果，必须配合 opacity 或 transform 类手动控制，hidden 只做最终开关。
最容易被忽略的是结构前提：所有路由视图必须静态共存、同级、不被 display: contents 或 Shadow DOM 隔离。一旦结构断裂，hidden 就退化成一个语义正确的 display: none，性能优势归零。
