hidden在首帧可能短暂可见，因其依赖ua样式表中[hidden]{display:none}规则的加载完成，而该规则存在注入延迟；真正“解析即隐藏”须用内联style="display:none"。
hidden 和 style="display: none" 看似都能“让元素消失”，但它们在渲染管道中走的是两条完全不同的路——一个靠语义开关，一个靠样式重算。选错会导致首帧闪现、layout 卡顿、SSR hydration 错位，甚至屏幕阅读器行为异常。
为什么hidden在首帧可能短暂可见
hidden 不是解析时就生效的指令，它依赖浏览器内置的 UA 样式规则 [hidden] { display: none; }。这个规则加载有延迟：外部 CSS 未就绪、WebView 注入滞后（比如旧版 Safari）、或 SSR 后 JS 尚未执行，都会导致元素先绘制再隐藏。
- 真正“解析即隐藏”的唯一方式是内联
style="display: none"，它在 HTML tokenization 阶段就被 parser 读取，优先级高于所有外部样式 - 服务端渲染常用写法：
<div hidden style="display: none">，兼顾语义与首屏稳定性 <li>若只用 <code>hidden且没配兜底 CSS（如[hidden] { display: none !important; }），hydration 不同步时极易闪现 -
el.hidden = true → el.hidden = false：不触发 reflow，元素按原始display值（如block）直接参与 layout -
el.style.display = 'none' → el.style.display = 'block'：强制 reflow，尤其在复杂 DOM 下代价明显 - 常见陷阱：
el.style.display = 'none'手动设置后，再设el.hidden = false不会清除该内联样式，元素仍不可见 - Vue 模板里写
<div :hidden="show">，实际生成的是 <code>el.hidden = show，发生在 commit 阶段 - React 中
<div hidden="{show}"> 同样绕过 fiber props diff，每次更新都强制 layout <li>同级多个 <code>hidden元素同时切换（如编辑器三视图），layout 开销线性增长 - SSR hydration 前建议用
el.hasAttribute('hidden')判断，比读el.hidden更可靠（因 SSR 渲染后属性存在但el.hidden可能为false） - 例如：
<div data-state="preview"> + <code>[data-state="preview"] { display: block; } - 服务端和客户端渲染逻辑完全一致，hydration 无错位风险
- 支持 transition、@media、伪类等完整 CSS 能力，
style和hidden都做不到 - 需要屏幕阅读器跳过时，可额外加
aria-hidden="true"，语义更精确
el.hidden = true 切换不触发 reflow，但el.style.display = 'none'会
hidden 是布尔属性，控制的是“是否进入渲染树”的开关；而 display 值变更直接影响 layout 计算路径。两者性能差距在一个数量级。
框架中:hidden或{hidden}不是响应式状态，而是绕过 diff 的副作用操作
Vue/React 都不把 hidden 当作可 diff 的响应式字段。它被当作“语义指令”在 patch 后直接赋值，无法合并、跳过或优化。
替代方案：data- + class 切换更可控
用 data-active 或 data-state 配合 CSS 类，能统一 SSR/CSS/JS 行为，规避 hidden 的语义与实现割裂问题。
最常被忽略的一点：是否需要子元素独立显隐、是否依赖 getBoundingClientRect()、是否要确保辅助技术正确跳过——这些才是决定用哪个的硬指标，而不是“哪个更语义”。
