iframe在Tab切换后仍后台运行是因为display:none仅视觉隐藏，不释放资源；应使用hidden属性暂停生命周期，并监听freeze事件彻底清理。
iframe 在浏览器 Tab 切换后仍在运行，是因为 display: none 不触发资源释放
这是最常被误解的一点：把 iframe 包在 display: none 的 div 里，并不能让它暂停。视频继续缓冲、setInterval 照常执行、fetch 请求不中断、内存持续上涨——这不是 bug，是浏览器规范行为。
原因在于：display: none 只影响渲染层，DOM 节点仍存活，JS 执行上下文未冻结，媒体自动播放策略也不生效。Safari 下甚至能听到隐藏 tab 里 <video> 的声音；WebSocket 连接不断开；反复切换后内存飙升卡死，都是典型表现。
- 别用
class="hidden"+.hidden { display: none; }控制 iframe 显隐 - 必须用原生
hidden属性（HTML5 语义化属性），它会主动暂停媒体、停掉脚本、释放资源 -
hidden必须加在iframe的**直接父容器**上（如<div hidden><iframe src="a.html"></iframe></div>），单独给iframe加hidden无效 - CSS 中统一接管样式：
[hidden] { display: none; }，不要写!important
hidden 属性无法覆盖系统级冻结（Frozen/Discarded），必须监听 freeze 事件
hidden 能解决 Tab 失焦时的资源释放，但挡不住系统级干预：比如 iOS 后台挂起、Chrome 移动端丢弃非活跃页、或低内存下强制冻结页面。这时仅靠 hidden 会漏掉清理时机，导致内存泄漏或状态错乱。
真正可靠的兜底方式是监听 freeze 事件，在浏览器挂起前主动销毁资源：
立即学习“前端免费学习笔记（深入）”；
- 在 iframe 内部 JS 中监听：
window.addEventListener('freeze', () => { /* 清理定时器、关闭 WebSocket、取消 pending fetch */ }) - 注意：该事件只在 iframe 页面本身处于冻结前触发，不是父页发的；父页无法代为监听
- 务必在
freeze回调中移除所有全局引用（如document.body.appendChild添加的临时节点） - 避免在
freeze中执行异步操作（如await localStorage.setItem），该事件无等待机制，执行完即冻结
Vue/React 中用 v-show 或 conditional rendering 会导致 iframe 重载
框架组件切换时若用 v-if 或 {show && <Iframe />}，会卸载并重建 DOM 节点，iframe 就会重新加载——这和 keep-alive 无关，是 DOM 生命周期决定的。即使你把整个组件包进 <keep-alive>，iframe 内容照样刷新，因为它的资源不在 VNode 树里。
正确做法是用 v-show（或 style={{ display: show ? 'block' : 'none' }}）强制保留节点：
- 确保 iframe 元素始终存在于 DOM 中，只是 CSS 控制显隐
- 配合
hidden属性做双重保障：<div :hidden="!activeTab"><iframe :src="url" /></div> - 首次激活时手动移除
hidden，否则白屏（尤其 SSR 场景下容易漏） - 别依赖
mounted或useEffect初始化 iframe，它们在v-show切换时不触发
document.visibilityState 对 iframe 内部无效，别混淆浏览器 Tab 和页面内 Tab
document.visibilityState 和 visibilitychange 事件只响应浏览器窗口/标签页级别的聚焦变化（比如用户切到微信、最小化 Chrome）。它完全感知不到你页面里写的那个「用户管理」Tab 和「订单列表」Tab 的切换。
常见错误就是在这儿栽跟头：
- 在 iframe 里监听
visibilitychange想控制播放暂停 → 实际根本不会触发 - 用
document.hasFocus()判断当前 tab 是否激活 → iframe 里永远返回false（尤其跨域时还可能抛SecurityError） - 试图让父页通过
visibilityState统一控制所有 iframe 显隐 → 逻辑错位，且不可靠
页面内 Tab 切换必须由业务逻辑自己驱动：用 data-active、aria-selected 或框架状态变量来管理，而不是寄希望于浏览器的 visibility API。
