能，但只省DOM构建和事件绑定开销，不省内存或渲染树计算量；需两个视图同级共存、无CSS覆盖、非Shadow DOM隔离且不动态替换DOM才能真正复用hidden切换。
hidden 属性在编辑器选项卡切换中真能省资源吗
能，但只省 DOM 构建和事件绑定开销，不省内存或渲染树计算量。它本质是避免反复 innerHTML 替换或 document.createElement + appendChild 的完整生命周期——比如从「源码模式」切到「预览模式」时，若两个视图已共存于 DOM 中，仅设 sourceView.hidden = true 和 previewView.hidden = false，就跳过了 HTML 解析、节点挂载、connectedCallback 触发等步骤。
但它不会减少已存在的 DOM 节点内存占用，也不会阻止浏览器对 hidden 元素做样式计算（只是不参与布局和绘制）。所以别指望用它降低 performance.memory.usedJSHeapSize —— 节省内存得靠卸载监听器、清空大数组引用、或真正移除节点。
DOM 结构必须满足哪些条件 hidden 才有效复用
常见错误是把预览区塞进源码区内部，或每次切换都用 JS 清空容器再重写内容。hidden 复用的前提是两个视图节点必须：
- 同为同一父元素的直接子节点（例如都挂在
<div id="editor-container">下） - 初始状态由 HTML 属性控制：
<div id="source-view"></div><div id="preview-view" hidden></div> - 父容器没有
display: contents—— 这个值会让 hidden 失效 - 没被 Shadow DOM 隔离（如用 Lit 封装组件，需确保
preview-view在 light DOM 中） - 没被 CSS 强制覆盖：
[hidden] { display: none !important; }必须存在且生效
为什么 el.hidden = false 有时切不回来
最常踩的坑不是 JS 写错，而是 DOM 状态和样式残留打架。检查这几点：
立即学习“前端免费学习笔记（深入）”；
-
el.style.display是否被之前逻辑设成了'none'？el.hidden = false不会自动清内联样式，得手动删：el.style.removeProperty('display') -
el.offsetParent返回null？如果是，说明它确实被隐藏了；否则要么 CSS 覆盖了，要么祖先有visibility: hidden或opacity: 0 - 是否在 Web Component 的
render()里动态生成内容？如果模板是${this.mode === 'preview' ? html`<div></div>` : ''}，那根本没 DOM 可切，hidden没地方挂 - 服务端渲染（SSR）后客户端 hydration 不同步：HTML 已带
hidden，但 JS 还没执行到el.hidden = false，用户看到闪动——需配style="opacity: 0"+ transition 缓解
hidden 和 display: none 在编辑器里怎么选
关键看你要隐藏的是什么：
- 想语义化声明「这部分当前完全不适用」（比如未登录时的编辑按钮），用
hidden；它会让屏幕阅读器跳过、表单提交时忽略<input hidden> - 需要过渡动画（淡入/高度展开）、或要保留焦点能力（比如折叠面板里的输入框），必须用 CSS 类切换
display/opacity/transform，hidden不支持任何中间状态 - 要视觉隐藏但参与表单提交（比如隐藏的 token 字段），绝不能用
hidden，改用style="position: absolute; left: -9999px"或class="sr-only" - 富文本编辑器里嵌的
<iframe>或 Monaco 实例，hidden只控制容器显隐，实例本身仍在运行——得配合monaco.editor.dispose()或 iframesrc清空才能真正停资源
hidden 不是性能开关，它是语义开关。用错场景，反而让代码更难维护、可访问性更差。
