hidden 是语义开关，display: none 是样式指令，二者底层机制不同：hidden 为布尔属性表达内容不适用上下文，display: none 仅控制渲染；hidden 可被 css 覆盖，而内联 display: none 需 !important 才能覆盖；el.hidden = false 不恢复手动设置的内联 display，须先清空 el.style.display；hidden 切换不触发 reflow，display 切换会；hidden 默认映射 aria-hidden="true" 但子元素可单独解除，display: none 则彻底移除无障碍树；搜索引擎可能索引 hidden 内容，忽略 display: none；hidden 与 display 共存时 hidden 强制生效，无视 !important。
hidden 是语义开关，display: none 是样式指令
两者表面效果相似，但底层机制完全不同：hidden 是 HTML5 布尔属性，表达“此内容当前不适用于上下文”；display: none 是纯 CSS 渲染控制，只管“怎么画”。浏览器默认用 [hidden] { display: none; } 实现视觉隐藏，但这规则来自 UA 样式表，不是硬编码逻辑。
这意味着：
-
hidden可被 CSS 覆盖（比如写[hidden] { display: block !important; }就能强行显示） -
display: none一旦写死在内联样式里（style="display: none"），普通 CSS 选中器无法覆盖，除非加!important - 没引入 normalize.css 或用了 Ant Design/Tailwind 等框架时，
div[hidden]可能因基础样式重置而失效
JS 切换 hidden 后元素仍不显示？先清内联 display
el.hidden = false 不等于“让元素变可见”——它只移除 hidden 属性，不管之前手动设的 el.style.display = 'none'。这是最常卡住的地方。
正确做法是：
- 先清空内联 display：
el.style.display = '' - 再设
el.hidden = false - 错误写法：
el.setAttribute('hidden', 'false')—— 这会新增一个值为"false"的属性，hidden仍是 true（布尔属性有值即生效）
reflow 开销差异：display 切换慢，hidden 切换快
频繁切换显隐时性能差距明显：el.style.display = 'none' → 'block' 强制触发 reflow（重排），开销大一个数量级；el.hidden = true → false 不触发 reflow，只是开关渲染树节点。
但注意：
-
hidden生效依赖 UA 样式加载完成，旧版 Safari 或某些 WebView 可能首帧闪现 - 要“解析即隐藏”，必须用内联
style="display: none"，它在 HTML tokenization 阶段就被 parser 读取 - 服务端渲染常用
<div hidden style="display: none"> 兼顾语义与首屏可靠性 <h3>可访问性与子元素行为截然不同</h3> <p><code>display: none让元素彻底退出渲染树和无障碍树，子元素一并失效；hidden默认映射为aria-hidden="true"，但子元素可主动声明hidden="false"或用 JS 移除来单独恢复。典型影响：
- 父
<fieldset hidden></fieldset>下的<input>仍可被 focus、验证、提交；display: none则完全不可交互 - 搜索引擎可能索引
hidden内容（视上下文），但直接忽略display: none的文本 - 动画场景下，
display无法 transition；[hidden]可配合opacity或transform做渐变
hidden和任意display值共存时，hidden强制覆盖，连!important都无效 —— 除非你手动删掉它。 - 父
