display: none 是隐藏 div 最直接有效的方式，它使元素彻底退出文档流、不占空间、不响应事件；visibility: hidden 仅视觉隐藏但保留占位和交互能力，易导致布局错位或误触发。
用 display: none 隐藏 div 后，visibility: hidden 不是替代方案
隐藏一个 div 最直接有效的方式就是 display: none。它让元素彻底退出文档流——不占空间、不响应事件、子元素也一并消失。而 visibility: hidden 只是“看不见”，但元素还在原位占着空间，鼠标悬停、焦点、甚至屏幕阅读器仍可能感知它。实际业务中，比如弹窗关闭、表单步骤切换、权限控制区域隐藏，用错会导致布局错位或交互异常。
常见错误现象：
– 页面留出大片空白，但 DOM 里 div 明明写了 visibility: hidden
– 点击空白处却触发了本该被隐藏的按钮（因为没真正移出交互流）
- 优先选
display: none，除非你明确需要保留占位（比如做淡入淡出过渡时配合opacity） - 如果要用 CSS 动画控制显隐，
display无法过渡，得搭配opacity+transition，并在动画结束时用 JS 切换display - 注意：设置
display: none后，JS 查询offsetHeight、getBoundingClientRect()会返回0，别拿它做条件判断依据
JS 控制 div 显隐时，别直接操作 style.display
直接写 element.style.display = 'none' 看似简单，但容易覆盖内联样式中的其他 display 值（比如原本是 inline-block），恢复时若硬写 'block' 就会破坏原有布局行为。
使用场景：
– 表单验证失败后显示提示 div
– 折叠面板点击展开/收起
– 条件渲染前的临时占位
立即学习“前端免费学习笔记（深入）”；
- 更稳妥的做法是切换 class：
element.classList.add('is-hidden')，CSS 中定义.is-hidden { display: none; } - 如果必须用 JS 控制，先缓存原始值：
const originDisplay = element.style.display || getComputedStyle(element).display;，再恢复 - 避免在循环中反复读写
style.display，会触发重排；批量操作建议用documentFragment或统一 class 控制
Vue/React 里用 v-if 和 v-show 的区别不是“性能差一点”那么简单
v-if 是条件渲染——为 false 时，元素完全不进入 DOM；v-show 是条件显示——始终渲染，只切 display: none。React 的 {condition && <div>...</div>} 等价于 v-if，没有内置的 v-show 对应物。
参数差异：
– v-if 有惰性：初始为 false 时，内部组件不会初始化、计算属性不执行、生命周期钩子不触发
– v-show 永远会挂载，只是 CSS 控制可见性
- 频繁切换（如 tab 标签页）优先用
v-show，避免重复挂载开销 - 涉及表单、富文本编辑器、地图组件等重型子组件时，用
v-if更安全，防止隐藏状态下仍在后台运行或报错 - React 中想模拟
v-show？别手写style={{ display: condition ? 'block' : 'none' }}，改用className切换更利于 CSS 维护
服务端渲染（SSR）下，display: none 可能被搜索引擎忽略
如果你在 SSR 页面里用 display: none 隐藏某些内容（比如首屏不需要但后续 JS 会显示的模块），搜索引擎爬虫可能直接跳过这部分 HTML，导致 SEO 内容丢失。这不是浏览器行为问题，而是爬虫解析策略所致。
性能 / 兼容性影响：
– Googlebot 现在能执行 JS，但仍有延迟和资源限制
– 百度、Bing 等对 JS 渲染支持更弱，纯靠 CSS 隐藏的内容大概率不索引
- SEO 敏感内容（如商品描述、FAQ、文章正文）不要依赖
display: none控制首次可见性 - 如果必须动态显示，服务端至少输出骨架 HTML，再由客户端 JS 补全真实内容
- 用
aria-hidden="true"+display: none是双保险，但对 SEO 无实质帮助，仅提升可访问性
