hidden属性不提升首屏渲染速度，仅优化JS动态显隐时的reflow性能；它不减少DOM节点或样式计算，需配合内联display:none兜底避免闪现，且在表格中仅适用于tr元素。
hidden 属性本身不提速，但能避免强制 reflow
hidden 不是性能优化“开关”，它不减少 DOM 节点数、不跳过解析，也不压缩 HTML。但它切换时 el.hidden = true/false 不触发 layout 阶段重排（reflow），而 el.style.display = 'none' 切换会强制 reflow——尤其在高频操作或复杂表格中，这能省下几十毫秒。
常见误判：以为加了 hidden 就能让首屏更快。实际影响只在 JS 动态控制显隐阶段；初始渲染速度主要取决于 HTML 体积、CSS 加载顺序和是否阻塞解析。
- 适合用 hidden 的场景：折叠面板展开/收起、Tab 切换、条件性区块（如未登录用户菜单）
- 不适合的场景：首屏骨架屏里大量
<div hidden></div>——这些节点仍参与样式计算、占用内存，不如服务端直接不输出 - reflow 差异实测：100 行表格中逐行 toggle
tr.hidden比 toggletr.style.display快 3–5 倍（Chrome 128+）
服务端直出 + hidden 的首屏闪现问题怎么兜住
SSR 页面里写 <section hidden></section>，但 CSS 还没加载完，浏览器先渲染再隐藏，用户看到“闪一下”——这不是 bug，是规范允许的行为，因为 [hidden] 依赖 UA 样式表或你写的 CSS 规则生效。
唯一可靠解法是加内联兜底样式：<section hidden style="display: none">。这样 parser 在解析 HTML 时就应用 display 规则，压制首个像素绘制。
立即学习“前端免费学习笔记（深入）”；
- 不要只靠外部 CSS 写
[hidden] { display: none !important; }——它可能晚于首帧渲染 - Next.js / Nuxt 等框架中，若用
getServerSideProps输出hidden，务必同步注入该内联样式 - 注意：
style="display: none"和hidden同时存在不冲突，后者接管语义与表单行为，前者保首帧安全
hidden 用错反而拖慢首屏：非渲染元素仍吃资源
很多人以为 “hidden = 元素消失 = 不占资源”，但事实是：DOM 节点照常构建、CSSOM 照常计算、内存照常占用。200 个 <div hidden> 在 SSR 首屏中，可使 DOM 构建延迟增加 40–60ms。
<p>真正提速不是藏，而是删。比如未登录态的个人中心入口，服务端就不该输出那段 HTML，而不是输出后立刻 <code>hidden。
-
new FormData(form)自动忽略hidden输入框，但document.querySelectorAll('input')仍包含它们——遍历成本不变 - Vue 的
v-if（销毁节点）比v-show（display: none）更轻量；同理，服务端条件渲染比客户端hidden更彻底 - Shadow DOM 中
hidden仍生效，但若 host 元素被display: none，子树可能提前丢弃——行为不一致，慎用
表格中用 hidden 控制行显隐的坑与正确姿势
在 <table> 里对 <tr> 用 hidden 是安全的，但对 <td> 或 <th> 单独加 hidden 会破坏表格结构，导致错位、自动补空单元格甚至渲染异常。
JS 控制必须严格走布尔赋值路径，且要清理残留内联样式：
- ✅ 正确：
row.hidden = false（恢复语义 + 渲染） - ⚠️ 危险：
row.style.display = 'block'; row.hidden = false——display值覆盖hidden效果 - ✅ 安全组合：
row.style.display = '';→row.hidden = false - 兜底 CSS 必须存在：
[hidden] { display: none !important; }，否则 SSR 下首行可能闪现
表格列控制别碰 hidden，老实用 data-column + 类切换，th 和所有对应 td 必须同步操作，漏一个就对齐崩。
