hidden 属性首帧可能闪现是规范行为，因依赖 ua 样式表中 [hidden] { display: none; } 规则延迟生效；内联 style="display: none" 才能真正“解析即隐藏”，ssr 中推荐 写法。
hidden 属性首帧可能闪现，不是 bug 是规范行为
浏览器解析 hidden 属性时，并不立即隐藏元素；它依赖 UA 样式表中预置的 [hidden] { display: none; } 规则生效。这个规则加载有延迟——尤其在 WebView、旧版 Safari 或 CSS 未完成下载时，元素会在首帧绘制后短暂可见。
真正“解析即隐藏”的唯一方式是内联写死：style="display: none"。它在 HTML tokenization 阶段就被 parser 读取，优先级高于所有外部样式，能压制首个像素渲染。
- SSR 场景下常见写法：
<div hidden style="display: none">，兼顾语义与首屏稳定性 <li>只用 <code>hidden但没配[hidden] { display: none !important; }的兜底 CSS，hydration 不同步时极易闪现 -
el.hidden = true是 JS 执行后才生效，无法控制 SSR 初始状态，仅适用于运行时逻辑 - 最常卡住的地方：
el.style.display = 'none'手动设置后，再设el.hidden = false不会清除该内联样式，元素仍不可见 - 动画中写
transition: display 0.3s完全无效——display不是可过渡属性 - 高频交互（如折叠面板快速展开/收起）中，
display切换比hidden更容易掉帧 - 验证深度：Chrome DevTools → Elements 面板右键任意节点 →
Show DOM properties，看depth值；≥7 就该重构 - SSR 框架（如 Next.js）常自动包裹
<div data-reactroot> 和 <code><div id="__next">，这两层要计入总 depth <li>递归菜单、表格单元格内嵌套 <code><div> 是深层结构高发区，需提前扁平化数据或改用 <code><col>显式控宽contenteditable 触发高频同步 layout，不是 DOM 大小问题
加了
contenteditable="true"就卡，主因不是 DOM 节点多，而是浏览器在每次输入、粘贴、光标移动时都强制同步 layout + paint。这不是偶发，是规范行为。典型性能毒药操作：
input事件里读el.innerHTML或调用getBoundingClientRect()，立刻掉帧；移动端软键盘弹出前后还会额外触发两次完整 layout。- 必须显式加
tabindex="0"，否则 Selection API 静默失效，JS 反复 fallback 成隐形性能杀手 - 粘贴时禁用
e.clipboardData.getData('text/html')，优先取'text/plain'；需保留语义时，先用 DOMPurify 过滤再插入 - 父容器有
overflow: hidden时，tabindex="0"可能引发滚动跳变，加scroll-behavior: smooth缓解
- 必须显式加
display: none 切换会强制 reflow，hidden 不会
执行 el.style.display = 'none' → el.style.display = 'block' 会强制触发 layout（重排），因为 display 值变更直接影响渲染树结构。这个开销在复杂 DOM 下比 visibility: hidden 切换大一个数量级。
而 el.hidden = true → el.hidden = false 不触发 reflow：hidden 是布尔开关，控制的是“是否进入渲染树”，移除后元素按原始 display 值直接参与 layout，无需重新推导。
DOM 深度超 6 层直接拖慢 FCP 200ms+，语义标签不提速但能防恶化
浏览器流式解析 HTML，每层嵌套都强制执行 DOM 节点创建 + 样式匹配 + 布局计算。实测显示：在低端安卓机或 iOS 14 设备上，<div><div><div><div><div><p>文本</p></div></div></div></div></div> 这类结构会让首次内容绘制（FCP）稳定延迟 200ms 以上。
语义标签如 <section></section>、<main></main> 本身不加快解析速度，也不减少节点数，但它天然替代多层 <div class="wrapper"> 堆叠，避免无意义嵌套，缩短 CSS 选择器匹配路径（比如 <code>main h1 比 div div div h1 快）。
