选 display: none 还是 visibility: hidden，取决于是否保留布局位置：前者彻底移出渲染流，后者仅隐藏但占位仍在，且仍可聚焦和提交。
display: none 和 visibility: hidden 到底怎么选
选 display: none 还是 visibility: hidden，取决于你是否想保留元素在布局中的位置。前者彻底移出渲染流，后者只是“看不见”，但占位还在。
常见错误是用 visibility: hidden 去隐藏表单字段却忘了它仍可被 tab 键聚焦、仍参与表单提交——这会引发无障碍和逻辑问题。
-
display: none：DOM 节点不参与渲染、不响应事件、不占用空间、不影响重排（reflow），但会触发重绘（repaint）+ 重排 -
visibility: hidden：节点仍在文档流中，保持尺寸和位置，子元素可通过visibility: visible单独显示，但父级隐藏时子元素无法获得焦点 - 动画兼容性上，
visibility支持transition（需配合opacity才有渐变效果），而display不支持过渡
用 CSS 自定义属性控制显隐容易踩的坑
用 --is-hidden 这类自定义属性做开关看似灵活，但直接写 display: var(--is-hidden, block) 是无效的——CSS 变量不能直接控制 display 的值类型，浏览器会忽略非法值并回退到初始值。
真正能用变量驱动显隐的方式只有两种：
- 配合
@property（仅 Chrome 115+ 支持）声明受控类型，再绑定到display—— 实用性极低，别在生产环境用 - 更靠谱的是用属性选择器 + class 切换：
[data-hidden="true"] { display: none; }，然后用 JS 控制dataset.hidden - 或者用
content-visibility: hidden（Chrome 85+），它比display: none更轻量，适合长列表折叠，但不适用于需要频繁切换的交互元素
HTML hidden 属性和 aria-hidden 的混用误区
hidden 是原生 HTML 属性，等价于 display: none，浏览器会直接跳过渲染；而 aria-hidden="true" 只影响辅助技术，对视觉和布局完全无影响。
立即学习“前端免费学习笔记（深入）”；
典型翻车场景：给弹窗加了 aria-hidden="true" 却没隐藏它本身，导致屏幕阅读器说“已隐藏”，但用户眼睛里还看着它。
- 必须同时处理视觉与语义：隐藏一个元素，优先用
hidden或display: none，再根据需要补aria-hidden -
aria-hidden="false"没有意义——它不会强制让辅助技术读取，只在父级aria-hidden="true"时用来“豁免”某个子元素 - 动态插入内容时，别忘了同步设置
hidden状态，否则可能短暂闪现（FOUC）
用 JavaScript 切换样式时性能要注意什么
频繁调用 element.style.display = 'none' 或读取 offsetHeight 会强制同步触发重排，尤其在循环或滚动中极易卡顿。
更稳的做法不是避免操作样式，而是批量、延迟、或换策略：
- 批量操作：把多个显隐操作合并到一个
DocumentFragment或临时class中，一次性更新 - 用
getComputedStyle替代offsetXXX读取（虽然也不能完全避免重排，但语义更清晰） - 对大量列表项，改用
content-visibility: auto+contain-intrinsic-size，让浏览器自动跳过不可见区域的渲染 - 慎用
requestAnimationFrame包裹显隐逻辑——它解决的是“何时执行”，不是“要不要重排”，该重排还是重排
最常被忽略的一点：CSS 动画显隐时，如果元素内含视频、iframe 或 canvas，即使 display: none，部分浏览器仍可能继续解码或渲染——得手动暂停或卸载。
