hidden 属性在渲染管道中于 CSS 加载完成后生效，依赖 UA 样式表规则 [hidden] { display: none; }，非解析阶段即时生效；需“解析即隐藏”时应使用内联 style="display: none"。
hidden 属性在渲染管道中何时生效
hidden 不是 HTML 解析阶段立即生效的“指令”，而是依赖浏览器 UA 样式表中的默认规则 [hidden] { display: none; }。这意味着它实际进入渲染管道的时间点，和外部 CSS 加载完成时间强相关。部分 WebView 或旧版 Safari 会因 UA 样式表延迟注入，导致 hidden 元素在首帧绘制后短暂闪现——这不是 bug，是规范允许的行为。
如果你需要“解析即隐藏”，必须用内联 style="display: none"，它在 HTML tokenization 阶段就被 parser 读取并应用，优先级高于任何外部样式，能真正压制首个像素渲染。
- 服务端渲染首屏骨架时，
<div hidden style="display: none">是兼顾语义与可靠性的常见写法 -
el.hidden = true在 JS 执行后才生效，不适用于 SSR 初始状态控制 - 不要指望
hidden支持 transition：它背后是display: none，而display不是可过渡属性
display: none 在 layout 阶段的真实行为
display: none 是唯一能让元素彻底退出渲染树（render tree）的 CSS 值。浏览器在构建 render tree 时直接跳过该节点：不计算几何、不生成图层、不触发 paint，连子元素也一并剔除。这带来两个关键影响：一是 getBoundingClientRect() 返回全零值，二是父容器高度可能塌陷（比如 <div><p style="display: none">xxx</p></div> 的 div 高度为 0）。
- 频繁切换
display: none↔display: block会强制触发 reflow，性能开销比visibility: hidden高得多 - 表单控件如
<input hidden>和<input style="display: none">效果一致：都不会出现在FormData中，也不会被form.elements收集 - 如果想隐藏但保留提交能力（比如埋点字段），不能用
display: none，得改用visibility: hidden; position: absolute; left: -9999px
hidden 和 display: none 对辅助技术的影响差异
hidden 是语义化声明：“此内容当前不相关”，屏幕阅读器默认跳过整个子树；而 display: none 是纯视觉指令，辅助技术是否忽略它，取决于具体实现——虽然主流读屏器都把它当作“不可访问”处理，但这不是规范保证的行为。
立即学习“前端免费学习笔记（深入）”；
- SEO 场景下，
hidden更明确向爬虫传达“暂不展示”，display: none可能被误判为隐藏文本（尤其当配合大量关键词时） - ARIA 实践中，
hidden可替代aria-hidden="true"，但若手动设了aria-hidden="false"，会覆盖hidden的语义 - 注意：两者都会让元素失去焦点能力，且无法响应 pointer events —— 这点没有区别
什么时候必须绕过 hidden，直接操作 display
当你需要动画、精确控制渲染时机，或兼容性兜底时，display 是更底层、更可控的选择。比如模态框遮罩层，若仅靠 hidden，一旦项目 CSS 中有 [hidden] { display: block !important } 这类覆盖规则，就会白屏；而直接写 style.display = "none" 或切换 class，行为更确定。
- 动态 Tab 切换推荐用
hidden：语义干净、JS 控制简单、无样式污染风险 - 轮播图非当前页卡片必须用
visibility: hidden，而非display: none，否则容器高度会抖动 - 不要在
<details>或<summary>上用display: none，可能破坏原生展开逻辑
最容易被忽略的一点：hidden 是全局属性，但它对 <script>、<meta> 等非渲染元素无效；而 display 是 CSS 属性，理论上可作用于任意元素，但对 <script> 这类本身不参与渲染的标签无意义。选哪个，先看你要控制的是“内容是否该存在”，还是“它怎么画出来”。
