不能直接省渲染开销，但能跳过 dom 重挂载和事件绑定流程——前提是组件节点已静态存在于 dom 中、且未被 css 覆盖或 shadow dom 隔离；spa 中动态 import + createelement 模式下 hidden 完全无效。
hidden 属性在 SPA 组件延迟加载中是否真能省渲染开销
不能直接省渲染开销，但能跳过 DOM 重挂载和事件绑定流程——前提是组件节点已静态存在于 DOM 中、且未被 CSS 覆盖或 Shadow DOM 隔离。
SPA 常见的“延迟加载”其实是路由切换时动态 import() + createElement + appendChild，这种模式下 hidden 完全没机会起作用：节点根本还没创建。真正能用上 hidden 的场景，是两个视图（如 tab 页、编辑/预览模式）**同级共存于 DOM**，仅靠切换显示状态复用节点。
- ✅ 有效场景：
<div id="editor-source"></div> <div id="editor-preview" hidden></div>，切换时只改el.hidden = false - ❌ 无效场景：每次切换都
container.innerHTML = template或用框架render()动态生成，hidden没地方挂 - ⚠️ 注意：
hidden不减少内存占用，也不跳过样式计算（CSSOM 仍处理该元素），只跳过 layout 和 paint 阶段
为什么 el.hidden = false 有时不显示，但 offsetParent 是 null
这不是 JS 执行失败，而是 DOM 状态和样式残留打架。最常见原因是内联 style.display 被之前逻辑设为 'none'，而 el.hidden = false 不会自动清除它。
- 检查
el.style.display是否为'none'；如果是，必须手动清除：el.style.removeProperty('display') - 确认父容器没有
display: contents—— 这个值会让[hidden]规则失效 - 检查是否有祖先元素设置了
visibility: hidden或opacity: 0，它们会覆盖hidden的效果 - 若用 Web Component 封装，确保目标元素在 light DOM 中，而非被
shadowRoot隔离
hidden vs display: none 在 SPA 组件切换中的 reflow 差异
el.hidden = true/false 切换不触发 reflow；el.style.display = 'none' → 'block' 会强制 reflow，开销大一个数量级。
reflow 发生在 layout 阶段，因为 display 值变更直接影响渲染树结构；而 hidden 只是开关“是否进入渲染树”，移除后元素按原始 display 值直接参与 layout，无需重新推导。
- 高频交互（如折叠面板快速展开/收起）应优先用
hidden，避免 layout thrashing - 但若组件初始化时用了
style="display: none"，后续仅设el.hidden = false无效——得先清内联样式 -
getBoundingClientRect()对两者都返回全零对象，但offsetHeight在hidden元素上也立即为 0，行为已对齐
服务端渲染（SSR）后 hydration 期间 hidden 的闪现问题
HTML 由服务端吐出带 hidden 的节点，但客户端 JS 尚未执行到 el.hidden = false，用户会看到短暂空白——这不是 bug，是规范允许的行为，因 [hidden] 规则依赖 UA 样式表注入时机。
- 可靠方案：服务端输出时用内联
style="display: none"，它在 HTML 解析阶段就被 parser 读取，能压制首帧渲染 - 客户端 hydration 后，用
requestIdleCallback或监听编辑器就绪事件（如monaco.editor.onDidCreateModel）再移除样式，而非依赖window.onload - 若骨架屏本身含字体图标，需等
@font-face加载完成再显示，否则出现图标空白 - 别在 SSR 输出的骨架容器上加
hidden——那会让骨架屏不可见，违背初衷；真正要隐藏的是“未就绪的真实内容区域”
hidden 的价值不在“多省多少性能”，而在“少做哪些事”：少一次 DOM 构建、少一次事件监听器绑定、少一次 layout 计算。但它极其依赖 DOM 结构稳定性和样式环境干净——稍有疏漏，就卡在“明明设了 false 却不显示”这种问题上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
