display: none 会触发重排重绘并丢失状态，visibility: hidden 保留布局和状态但占位；页面内 Tab 切换需组件自身管理，document.visibilityState 仅响应浏览器标签页切换；iframe 中 hasFocus() 返回 false 是正常限制；v-show 不触发组件销毁，需手动处理生命周期。
HTML标签页切换时，visibility 和 display 的区别直接影响效果
标签页切换效果是否“卡顿”“闪白”“内容重绘”，往往不是 JS 逻辑问题，而是 CSS 渲染层的隐藏策略选错了。用 display: none 切换会触发 DOM 重排 + 重绘，且内部表单、视频、Canvas 等状态全部丢失；而 visibility: hidden 保留布局和状态，但元素仍占位，可能影响父容器高度。
实操建议：
- 需要保留
iframe播放状态或canvas绘图上下文 → 优先用visibility: hidden+pointer-events: none - 标签页内容差异大、内存敏感（如含大量图表）→ 用
display: none，但需手动保存/恢复关键状态（如input.value、scrollTop） - 现代方案可结合
hidden属性（原生语义化）+ CSS[hidden] { display: none; }，兼容性好且语义清晰
使用 document.visibilityState 无法监听标签页内 Tab 切换
document.visibilityState 只响应浏览器标签页（Tab）的聚焦/失焦，比如用户切到另一个 Chrome 标签或最小化窗口。它完全不感知页面内用 JS 实现的「标签页组件」（如 tab-pane）切换。混淆这点会导致监听失效、自动暂停逻辑错乱。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 在「首页」Tab 里播放音频，切到「设置」Tab 后音频仍在响 → 错把页面内 Tab 切换当成浏览器 Tab 失焦
- 监听
visibilitychange事件试图控制某个div显隐 → 该事件根本不会因点击 Tab 按钮触发
正确做法：页面内 Tab 切换必须由组件自身管理状态，例如用 data-active="true" 控制显隐，或用 React/Vue 的响应式状态驱动渲染。
Chrome 中 iframe 嵌套标签页时，document.hasFocus() 返回 false 是正常行为
当标签页内容通过 iframe 加载，且该 iframe 被设为 display: none 或处于非激活 Tab 中，其内部调用 document.hasFocus() 几乎总是返回 false——这不是 bug，是浏览器主动限制，防止恶意脚本探测用户焦点位置。
影响与应对：
- 依赖
hasFocus()自动播放音视频？不可靠，应改用用户手势（如click或touchstart）触发play() - 想判断当前 Tab 是否“可见”？用
IntersectionObserver监听目标区域是否在视口内，比hasFocus()更稳定 - 跨域
iframe下连hasFocus()都可能抛SecurityError，务必加try/catch
Vue/React 中标签页组件未销毁，mounted 或 useEffect 不会重复执行
多数 UI 库（如 Element Plus、Ant Design）默认用 v-if 或 show 控制 Tab 内容渲染，但若只用 v-show 或 CSS 隐藏，则组件实例一直存活：mounted 只在首次挂载时触发一次，useEffect(() => {}, []) 也仅执行一次。这容易导致数据没刷新、事件监听重复绑定、定时器未清理等问题。
排查要点：
- 检查模板中是否误用
v-show替代v-if（Vue）或style={{ display }}替代条件渲染（React） - 若必须保活组件（如保留表单输入），应在
activated/deactivated（Vue）或自定义 Hook（React）中手动同步数据和清理副作用 - 用浏览器 DevTools 的 Elements 面板查看 DOM 节点是否真实存在，比看 JS 状态更直接
复杂点在于：视觉上“切换了”，但 JS 生命周期没走完，状态残留比报错更难定位。别只盯着控制台，多看 DOM 树和内存快照。
