hidden属性在首帧可能闪现，因其依赖ua样式表中[hidden]{display:none}规则，而该规则加载延迟会导致元素短暂可见；真正“解析即隐藏”须用内联style="display:none"。
hidden 属性在首帧渲染时为何可能闪现
hidden 不是 HTML 解析阶段立即生效的指令，它依赖浏览器 UA 样式表中预置的 [hidden] { display: none; } 规则。这意味着：若外部 CSS 尚未加载完成，或 WebView 注入 UA 样式有延迟（如旧版 Safari），元素会在首帧绘制后短暂可见——这不是 bug，而是规范允许的行为。
真正“解析即隐藏”的唯一方式是内联 style="display: none"，它在 HTML tokenization 阶段就被 parser 读取并应用，优先级高于所有外部样式。
- 服务端渲染（SSR）场景下，
<div hidden style="display: none"> 是兼顾语义与首屏稳定性的常见写法 <li>若只用 <code>hidden且未配[hidden] { display: none !important; }的兜底 CSS，hydration 不同步时极易出现闪现 -
el.hidden = true是 JS 执行后才生效，无法控制 SSR 初始状态，仅适用于运行时逻辑 - 频繁切换
display: none↔display: block会强制触发 reflow，开销远高于visibility: hidden切换（后者只触 repaint） -
getBoundingClientRect()返回全零值，offsetParent为null，父容器高度可能塌陷（比如空<div><p style="display: none">xxx</p></div>高度为 0） - 动画中写
transition: display 0.3s完全无效——display不是可过渡属性 -
display: none节点不生成 RenderObject，也不存 layout 数据，GPU 渲染队列里无其指令 -
visibility: hidden节点仍保有完整 RenderObject 和 layout 结果，只是绘制阶段跳过输出像素 -
hidden行为因引擎而异：Chromium 接近visibility: hidden路径，WebKit（Safari）某些版本更激进地跳过部分 layout 计算，但不保证 - 如果元素原本是
<div style="display: flex">，设 <code>hidden = true后再设hidden = false，它会按flex显示 - 但如果曾执行过
el.style.display = 'none'，之后再设hidden = false，那个内联display: none依然存在，元素仍不可见 - 解决办法只有显式清理：
el.style.display = ''或el.style.removeProperty('display')
display: none 切换会强制触发 reflow
display: none 让元素彻底退出渲染树（render tree）：不计算几何、不生成图层、不 paint，连子元素也一并剔除。这带来两个关键性能影响：
hidden 和 display: none 在内存与 DOM 查询上的错觉
三者（hidden、display: none、visibility: hidden）都不会销毁 DOM 节点：document.getElementById() 始终有效。真正差异在于浏览器内部是否为其生成渲染对象（RenderObject）和缓存 layout 数据：
别盯着内存数字做决策——该关心的是你是否需要子元素独立显隐、是否依赖 getBoundingClientRect()、是否要确保屏幕阅读器正确跳过。
JS 操作 hidden 后 display 值不会自动恢复
这是最常卡住的地方：el.hidden = false 或 el.removeAttribute('hidden') 只是移除属性，它不会清除你之前手动设置的 el.style.display = 'none'，也不会还原任何 CSS 中定义的原始 display 值。
框架（如 Vue 的 v-if）底层模拟的是 display: none 或直接删节点，若你手动加了 display 样式又忘了清理，就可能和框架逻辑冲突——这点容易被忽略。
