hidden 属性闪现非 bug，因 ua 样式表注入晚于 html 解析；真正“解析即隐藏”需内联 style="display: none"；ssr 常用 兼顾语义与可靠性。
hidden 属性在首屏渲染时为何会闪现
不是 bug，是规范允许的行为：hidden 依赖 UA 样式表中的 [hidden] { display: none; } 规则生效，而 UA 样式表注入时机晚于 HTML 解析。部分 WebView 或旧版 Safari 会在 CSS 加载完成前短暂绘制带 hidden 的元素。
真正“解析即隐藏”的唯一方式是内联 style="display: none"——它在 HTML tokenization 阶段就被 parser 读取，优先级高于任何外部样式，能压制首个像素渲染。
服务端渲染（SSR）场景下，常见写法是：<div hidden style="display: none">，兼顾语义与可靠性。
<h3>display: none 切换时为什么比 visibility: hidden 更卡</h3>
<p><code>display: none 会让浏览器在 layout 阶段直接跳过该节点：不计算尺寸、不生成渲染对象（RenderObject）、子树一并剔除。切换回 display: block 时，必须重建整个渲染子树，强制触发 reflow。
而 visibility: hidden 仍完整走完 layout 和 paint 准备流程，只是最终不输出像素；切换只触 repaint，开销小得多。
- 高频显隐（如 hover 菜单、折叠面板）优先用
visibility+opacity组合 - 若必须用
display，建议缓存 DOM 引用，避免连续强制同步 layout -
getBoundingClientRect()在display: none下返回全零，在visibility: hidden下返回真实值
JS 设置 el.hidden = false 后元素还不显示？
这是最常卡住的地方：el.hidden = false 只移除 hidden 属性，**不会清除你之前手动写的 el.style.display = 'none'**。
结果就是：属性没了，但内联样式还在，元素继续不可见。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
正确做法是：
- 设
el.hidden = false后，再显式重置内联 display：el.style.display = '' - 或统一用 class 控制显隐，避免混合操作
hidden和style.display - 服务端渲染 hydration 不同步时，尤其要注意 JS 执行前后 display 值是否被污染
hidden 和 display: none 对表单提交的影响完全不同
hidden 是语义化声明：“此内容当前不适用”，所以 <input hidden> 不会出现在 FormData 中，也不会被 form.elements 收集。
display: none 是纯视觉控制，<input style="display: none"> 依然参与表单提交、验证和焦点管理。
想“视觉隐藏但保留提交能力”，不能用 display: none，得改用：visibility: hidden; position: absolute; left: -9999px 或 sr-only 类。
容易忽略的点：表单字段设 display: none 后，checkValidity() 仍可能返回 true（被跳过校验），而 hidden 下该方法根本不会被调用。
