display: none 元素彻底移除，不占空间、不可交互、不参与渲染；visibility: hidden 仅视觉隐藏，仍占位、可交互、保留布局。
display: none 和 visibility: hidden 有什么区别
关键在“是否还占空间”：用 display: none，元素彻底消失，不占文档流位置；用 visibility: hidden，元素还在原位，只是看不见，会保留空白。
常见错误现象：visibility: hidden 下点击事件仍可触发（比如误以为“隐藏了就点不到了”），而 display: none 后元素完全不可交互、不可聚焦、不参与布局计算。
- 需要彻底移除渲染和交互时，必须用
display: none - 做淡入淡出动画时，不能直接用
display: none（它不支持过渡），得先设opacity: 0+visibility: hidden，再延迟加display: none - 屏幕阅读器对
display: none元素默认忽略，visibility: hidden也不读——但若需语义隐藏（如仅对视觉隐藏），应改用clip-path: inset(100%)或position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
display: none 在 JavaScript 中怎么安全切换
直接操作 style.display 很容易覆盖原有值（比如原本是 flex 或 grid），切回来时忘记恢复，导致布局错乱。
使用场景：按钮点击收起面板、表单校验失败高亮某字段后临时隐藏提示等。
立即学习“前端免费学习笔记（深入）”；
- 别写
el.style.display = 'none'后又写el.style.display = 'block'——block 不一定对，可能是inline-flex或table-cell - 推荐存原始值：
const originalDisplay = el.style.display || getComputedStyle(el).display;，再切换 - 更稳妥的做法是切 CSS 类：
el.classList.add('is-hidden')，配合.is-hidden { display: none; }，避免 JS 干预样式逻辑 - 注意：
getComputedStyle(el).display返回的是计算后值，对未设置style.display的元素也有效
display: none 对性能和可访问性的影响
它确实能减少重排（reflow）和重绘（repaint），但不是万能优化手段。
性能影响：元素设为 display: none 后，浏览器不会渲染其子树，DOM 子节点的样式计算、布局、绘制全跳过——这点比 opacity: 0 强得多。
- 但大量使用
display: none+ 频繁切换，可能引发 layout thrashing（尤其在循环里反复读写offsetHeight后立刻设display: none） - 对屏幕阅读器：绝大多数情况下，
display: none元素被完全忽略（包括其子节点），无需额外加aria-hidden - 例外：如果父元素是
display: none，但子元素强行设display: block，无效——display: none具有继承穿透性，子元素无法“挣脱”
React/Vue 中用 display: none 要小心什么
框架层面对条件渲染有自己的机制，硬塞 display: none 容易和声明式逻辑打架。
使用场景：临时隐藏某个组件（比如加载中遮罩），但又不想触发卸载/重新挂载生命周期。
- React 中，别写
style={{ display: isLoading ? 'none' : 'block' }}来代替{isLoading && <spinner></spinner>}——前者仍保留在 DOM 中，事件监听器、定时器没清理，内存泄漏风险高 - Vue 中同理，
v-show底层就是display: none切换，但它只控制显隐，不销毁组件；v-if才真正卸载。选哪个看是否需要保留状态 - SSR 场景下，服务端渲染时若用了
display: none控制显隐，客户端 hydration 可能因初始状态不一致报 warning，优先用框架推荐方式
最常被忽略的一点：父容器设了 display: none，子元素哪怕写了 display: block !important 也无效——这个层级压制没法靠优先级破除，只能改父级或换策略。
