hidden 属性是语义标记而非 display: none 快捷方式，首帧可能闪现，需兜底 CSS；display 切换触发 reflow，hidden 不触发；hidden 影响表单提交和可访问性，SSR 需搭配 style="display: none"。
hidden 属性不是 display: none 的快捷写法
它本质是语义标记，不是样式指令。浏览器默认用 [hidden] { display: none; } 实现它，但这个实现依赖 UA 样式表加载完成——也就是说，hidden 在 HTML 解析阶段不生效，首帧可能闪现；而 style="display: none" 是 parser 在 tokenization 阶段就解析并应用的，能真正“解析即隐藏”。
常见错误现象包括：SSR 页面中元素短暂可见、旧版 Safari 或 WebView 里 hidden 失效、用了 Tailwind 的 flex 类后 hidden 不起作用（因为类设置了 display: flex，覆盖了 UA 默认规则）。
解决办法很简单：必须手动加兜底 CSS：
[hidden] { display: none !important; }
放在 @layer base 底部或基础样式文件末尾，否则框架重置样式可能把它干掉。
立即学习“前端免费学习笔记（深入）”；
display: none 切换会强制 reflow，hidden 不会
执行 el.style.display = 'none' → el.style.display = 'block'，浏览器必须重建渲染树、重新计算所有受影响节点的 layout，开销大一个数量级；而 el.hidden = true → el.hidden = false 只是开关渲染树入口，不触发 layout 重算。
但注意这个坑：el.style.display = 'none' 手动设置后，再设 el.hidden = false 并不会恢复显示——内联样式还在，优先级低于 hidden 的隐式 !important，但它的存在会阻止 hidden 的默认行为生效。正确做法是先 el.removeAttribute('hidden')，再清理内联样式或靠 class 控制。
高频交互场景（如折叠面板快速展开/收起）下，display 切换抖动明显，hidden 更稳。
getBoundingClientRect() 和辅助技术行为差异暴露底层机制
display: none 元素调用 getBoundingClientRect() 必然返回全零对象，offsetHeight 立即为 0；hidden 元素在主流浏览器中也返回全零（Chromium/Webkit 已对齐），但这是渲染树剔除的结果，不是 CSS 计算失败。
更关键的区别在可访问性：hidden 是语义化声明，等价于自动设置 aria-hidden="true"，且子元素可通过 hidden="false" 或 aria-hidden="false" 显式恢复；而 display: none 是纯视觉指令，屏幕阅读器是否忽略它，取决于实现，不是规范保证。
表单字段用 <input hidden> 时，它不会出现在 form.elements 中，也不会被 FormData 收集；但若只是 style="display: none"，字段仍在表单结构里，验证逻辑照常运行，容易导致“看不见却报错”。
SSR 和 hydration 场景下必须配 style="display: none"
hidden 属性本身无法控制服务端初始状态的渲染表现——它只在 JS 执行后才起作用，而 SSR 输出的是静态 HTML。如果只写 <div hidden>，CSS 没加载完前，用户大概率看到闪现。
可靠写法是：<div hidden style="display: none">。这样既保留语义，又靠内联样式压制首帧像素；hydration 后 JS 可安全操作 el.hidden，无需担心样式竞争。
另一个常被忽略的点：IE 完全不支持 hidden，需 fallback。但别用 document.documentMode 判断——现代项目早该放弃 IE，真要兼容，直接用 class="is-hidden" + .is-hidden { display: none; } 更可控。
