关键不是“藏没藏”，而是“怎么藏”：display: none 触发重排，高频切换致卡顿；动画场景优先用 opacity: 0 + pointer-events: none + tabindex="-1"；hidden 属性需内联 style="display: none" 防闪现；表单字段必须用 hidden 避免提交。
隐藏元素本身不卡，但用错方式会让浏览器反复重排、白算 layout、内存虚高——关键不是“藏没藏”，而是“怎么藏”。
display: none 会触发重排，别在动画里高频切换
每次设 el.style.display = 'none' 或切回 'block'，浏览器必须重新计算整个渲染树的几何关系。复杂 DOM 下，一次切换可能耗时数毫秒，连点三次菜单就明显卡顿。
- 动画/折叠面板/悬停菜单等高频交互场景，优先用
opacity: 0+pointer-events: none+tabindex="-1"组合，只触 repaint，不 trigger reflow - 真要切
display，用requestAnimationFrame批量收拢操作，避免连续读写造成强制同步布局 -
transition: display 0.3s完全无效——display不是可过渡属性，别写
hidden 属性不等于 display: none，漏兜底 CSS 就会闪现
hidden 是语义属性，底层靠 UA 样式表里的 [hidden] { display: none; } 生效。外部 CSS 加载慢、被框架类名覆盖、或旧 WebView 注入延迟，都会导致首帧闪出内容。
- SSR 或首屏关键区域，必须写
<div hidden style="display: none">，内联样式解析即生效，压制闪现 <li>项目全局补一行 <code>[hidden] { display: none !important; }，防 Tailwind、AntD 等重置样式意外覆盖 -
el.hidden = true是 JS 运行时行为，对服务端初始状态无影响，不能替代内联style - 长列表虚拟滚动中，别给每个
<li>加content-visibility: hidden——改用display: none或直接从 DOM 移除节点更干脆 - 若要用
content-visibility: auto，必须配contain-intrinsic-size，否则滚动时 layout + paint 反复回退 - 真正隔离 layout 影响，得用
contain: strict，但前提是容器有确定高度（height或min-height不为auto） - 权限控制、步骤跳过、条件字段等场景，一律用
el.hidden = true，浏览器彻底忽略：不验证、不提交、不进form.elements、屏幕阅读器跳过 - 多步骤表单必须共用一个
<form></form>，用hidden切换字段，别拆多个<form></form>——否则FormData断层、状态易丢 - iOS 9.3 以下需 fallback：
el.style.display = 'none'; el.value = ''; el.removeAttribute('required');
content-visibility: hidden 不省 layout，误用反而更卡
它只是跳过绘制（paint），但 layout 和 style 计算照常进行。一个 content-visibility: hidden 的列表项，只要带 margin 或参与 flex 分配，父容器每次重排仍得为它算一遍尺寸。
表单字段隐藏必须用 hidden，display: none 会偷偷提交
display: none 的 <input> 仍在 form.elements 里，new FormData(form) 会包含它，校验逻辑也照常跑——表面藏了，实际还在后台捣乱。
最隐蔽的坑不在“藏”，而在“藏完还留着”。visibility: hidden 和 opacity: 0 都保留布局占位和事件能力，display: none 和 hidden 才真正退出渲染树——但前者触发重排，后者依赖 CSS 正确加载。选哪个，得看你是想省 CPU、省 GPU，还是省调试时间。
