hidden 属性是语义化隐藏，移除元素于可访问性树且禁用交互，不等同于 display: none；它适用于静态声明式隐藏场景，JS 应通过 el.hidden = true/false 控制，不影响 SEO 但不阻止资源加载。
HTML 的 hidden 属性不是“CSS display: none 的快捷写法”，它本质是语义化隐藏，且会阻止元素参与可访问性树和部分 DOM 交互 —— 别用它替代 style="display:none" 来做动态切换。
为什么 hidden 不等于 display: none
两者视觉效果相似，但行为差异明显：hidden 是 HTML 原生布尔属性，浏览器会直接跳过渲染该元素（包括子节点），同时移除其在辅助技术中的暴露；而 display: none 是 CSS 渲染控制，元素仍存在于 DOM 树、可被 JS 访问、能响应事件（除非显式禁用）。
常见错误现象：给一个 hidden 元素绑定 click 事件，结果点不触发 —— 因为它已被 UA（用户代理）视为“不可交互”。
-
hidden元素的offsetHeight、offsetWidth恒为 0，且getBoundingClientRect()返回全零值 - 屏幕阅读器默认跳过
hidden元素，即使你手动加了aria-hidden="false"也无效 - 通过 JS 设置
element.hidden = false或移除hidden属性，才能恢复可见性和可访问性
何时该用 hidden 属性
适合用于“声明式、静态、无需后续交互”的隐藏场景，比如初始状态下的占位内容、服务端预渲染后暂不展示的模块、或纯结构预留区域。
立即学习“前端免费学习笔记（深入）”；
典型使用场景：
- 服务端模板中根据权限决定是否渲染某块 UI，若无权限则直接加
hidden，而非输出空div+ CSS 控制 - 表单中某组字段在特定条件下才启用，初始加载时用
hidden表达“当前不适用”，比display: none更语义准确 - 避免 SSR/SSG 页面闪动：服务端输出带
hidden的元素，客户端 JS 再按需移除，比先显示再隐藏更稳定
注意：不要在 Vue/React 等框架的条件渲染逻辑里混用 v-if / {condition && <...>}</...> 和 hidden —— 它们语义冲突，容易导致状态不一致。
如何安全地与 JS 配合切换 hidden
JS 控制 hidden 应始终走 DOM 属性操作，而非 class 或 style。浏览器对 hidden 属性的变更有原生优化，比反复 toggle class 更轻量。
实操建议：
- 设置隐藏：用
el.hidden = true（自动添加hidden属性）或el.setAttribute('hidden', '') - 取消隐藏：用
el.hidden = false（自动移除属性），不要用el.removeAttribute('hidden')—— 虽然有效，但不如赋值语义清晰 - 检测状态：统一用
el.hidden布尔值判断，别查el.hasAttribute('hidden')，因为el.hidden已封装了属性存在性与布尔逻辑 - 避免竞态：如果多个脚本可能同时修改同一元素的
hidden，建议封装成函数并加简单锁（如if (!el._isHiding) { el._isHiding = true; ... }），否则可能因异步导致状态错乱
示例：
const panel = document.getElementById('settings-panel');
// 正确：声明式切换
panel.hidden = !user.hasSettingsAccess;
// 错误：混合使用，破坏语义
panel.style.display = user.hasSettingsAccess ? 'block' : 'none';
panel.hidden = !user.hasSettingsAccess;
hidden 对性能和 SEO 的实际影响
搜索引擎会忽略 hidden 元素的内容，不计入页面关键词权重；但不会惩罚页面 —— 只要隐藏理由合理（如 tab 面板未激活项、多步骤表单的非当前步），就属于正常模式。
性能方面，hidden 元素仍会解析、构建 DOM、执行内联脚本（如 <script>console.log('hi')</script>），但不触发布局、绘制、合成。所以它比 display: none 节省的是渲染流水线开销，而非 JS 执行或内存占用。
容易被忽略的点：
-
hidden不阻止<img>的 src 加载，图片仍会发起请求 —— 如需懒加载，得配合loading="lazy"或 JS 控制 -
hidden元素内的<video>不会自动暂停，音频仍可能播放（取决于浏览器策略），需手动处理 - 某些旧版 Safari（≤15.4）对
hidden的可访问性支持不完整，测试时务必用 VoiceOver 实测
