hidden属性不触发reflow，因它仅控制渲染树开关；display:none切换强制reflow，开销大一个数量级；hidden依赖ua样式表生效，可能首帧闪现，内联style="display:none"可解析即隐藏。
hidden 属性本身不产生性能开销，但强制触发 display: none 会引发 layout 阶段跳过；而 display: none 的切换会强制 reflow，频繁操作时比 visibility: hidden 慢一个数量级。
hidden 属性在渲染管道中何时真正生效
hidden 不是解析阶段立即隐藏的指令，它依赖浏览器 UA 样式表中的 [hidden] { display: none; } 规则。这意味着它的实际生效时间点，和 CSS 加载完成强相关。部分 WebView 或旧版 Safari 可能因 UA 样式注入延迟，导致元素在首帧绘制后短暂闪现——这不是 bug，是规范允许的行为。
若需“解析即隐藏”，必须用内联 style="display: none"。它在 HTML tokenization 阶段就被 parser 读取并应用，优先级高于任何外部样式，能压制首个像素渲染。
服务端渲染首屏骨架时，<div hidden style="display: none"> 是兼顾语义与可靠性的常见写法。
<h3>display: none 切换会强制 reflow，hidden 切换不会</h3>
<p>当你执行 <code>el.style.display = 'none' → el.style.display = 'block'，浏览器必须重新计算 layout（重排），因为 display 值变更直接影响渲染树结构。这个过程开销大，尤其在复杂 DOM 下。
而 el.hidden = true → el.hidden = false 不触发 reflow：hidden 是布尔属性，控制的是“是否进入渲染树”的开关，而非“如何渲染”。移除 hidden 后，元素按其原始 display 值（如 block、flex）直接参与 layout，无需重新推导。
- 但注意：
el.style.display = 'none'手动设置后，再设el.hidden = false不会清除该内联样式，元素仍不可见 —— 这是最常卡住的地方 - reflow 开销在动画/高频交互场景下尤为明显，比如 hover 菜单、折叠面板快速展开收起
getBoundingClientRect() 和 offsetHeight 行为差异暴露底层机制
display: none 元素调用 getBoundingClientRect() 返回全零对象，offsetHeight 立即为 0；而 hidden 元素在 JS 中仍可正常读取几何信息（取决于实现，但主流浏览器已对齐为全零），关键区别在于：前者是 CSS 计算结果，后者是渲染树剔除的直接反馈。
更隐蔽的影响是父容器高度塌陷：<div><p style="display: none">xxx</p></div> 的 div 高度为 0；但若用 hidden，同样会塌陷 —— 因为两者最终都让元素退出渲染树。
真正影响布局稳定性的不是“用哪个”，而是“怎么切”：用 class 切换 .is-hidden { display: none; } 和直接操作 el.hidden 在 layout 行为上一致；但若混用（比如 class 控制 display，又手动设 hidden），就可能因优先级覆盖导致意外不可见。
为什么不能对 hidden 做 transition，但可以对 display: none 做“伪过渡”
hidden 是布尔状态，没有中间值，浏览器不提供过渡钩子；display 本身不是可过渡 CSS 属性，transition: display 0.3s 完全无效。
所谓“伪过渡”，其实是靠组合其他可过渡属性实现的：
- 先设
display: block; opacity: 0; visibility: hidden; - 再用
transition: opacity 0.2s, visibility 0.2s;+ JS 移除 class 触发 visible → opacity: 1
而 hidden 无法参与这套流程 —— 它一出现就跳过整个渲染流程，连 paint 都不走，自然没机会过渡。想做渐隐，只能用 [hidden] { opacity: 0; transform: translateY(-10px); } 配合 JS 切换属性，但要注意：这仅改变视觉，不解除语义隐藏（屏幕阅读器仍跳过）。
最易被忽略的是：很多 UI 库内部用 hidden 控制显隐，但你在外层加了 transition 却发现没反应 —— 那八成是没意识到 hidden 的“硬开关”本质，还在试图给它加动画。
