hidden属性不是display:none的快捷写法，而是语义开关，浏览器默认通过[hidden]{display:none}实现视觉隐藏，但该规则来自UA样式表而非HTML解析器内置行为，易受第三方样式覆盖。
hidden 属性不是 display: none 的快捷写法
它本质是语义开关，不是样式指令。浏览器默认用 [hidden] { display: none; } 实现视觉隐藏，但这个规则来自 UA 样式表，不是 HTML 解析器内置行为。所以：
• hidden 加在 <div hidden> 上，不等于直接写了 style="display: none"
• 如果你项目里没引入 normalize.css，或用了 Ant Design/Tailwind 等框架，它们可能重置了 div 的 display 值（比如设成 inline-flex），hidden 就会失效
• 写 div[hidden] { display: block !important; } 能强行绕过，但这违背语义，不该在生产环境用
JS 切换 hidden 时最常卡住的坑
el.hidden = false 不等于“让元素显示出来”——它只移除 hidden 属性，不管你的内联样式：
• 如果之前手动执行过 el.style.display = 'none'，现在 el.hidden = false 后，元素依然不可见
• 正确清理方式是：先 el.style.display = ''（清空内联 display），再 el.hidden = false
• 错误写法 el.setAttribute('hidden', 'false') 会新增一个值为 "false" 的属性，hidden 仍生效（布尔属性有值即 true）
首屏渲染闪现问题怎么根治
所谓“hidden 元素刚打开时闪一下”，不是 bug，是规范允许的行为：
• UA 样式表注入晚于 HTML 解析，部分 WebView 或旧 Safari 会在 CSS 加载完前短暂绘制该元素
• 真正“解析即隐藏”的唯一办法是内联 style="display: none"，它在 tokenization 阶段就被 parser 读取
• SSR 场景下推荐写法：<div hidden style="display: none">，既保留语义，又堵死闪现漏洞
display: none 切换比 hidden 切换更重
频繁显隐时性能差异明显：
• el.style.display = 'none' → 'block' 强制触发 reflow，整个子树要重建 layout
• el.hidden = true → false 不触发 reflow，只是开关渲染树入口，开销小得多
• 但注意：visibility: hidden 切换只触 repaint，比两者都轻；高频 hover 或折叠面板建议用 visibility + opacity 组合
• display: none 下调用 getBoundingClientRect() 返回全零，hidden 下返回真实尺寸值
立即学习“前端免费学习笔记（深入）”；
实际用的时候，别把hidden 当成 CSS 的替代品，它管的是“该不该存在”，而 display 管的是“怎么渲染”。混用时优先级容易翻车，尤其在 SSR hydration 或第三方样式干扰下。 
