document.visibilityState === 'hidden' 时页面可能仍在前台，因浏览器主动干预：Chrome 冻结闲置标签页、Firefox 休眠、Edge 预渲染均会触发该状态；iOS Safari 更常卡在 'visible'（如App切后台或播放音频时），并非 bug。
单次读取 document.visibilityState 做业务判断，90% 会出错——必须监听 visibilitychange 事件，且得处理 iOS、SSR、预加载等真实环境干扰。
为什么 document.visibilityState === 'hidden' 时页面还在前台？
这不是 bug，是浏览器主动干预：Chrome 会对闲置标签页冻结（visibilityState 变 'hidden'），但用户其实没切走；Firefox 标签休眠、Edge 预渲染也会触发。更典型的是 iOS Safari——App 切后台后，visibilityState 经常卡在 'visible' 不动，哪怕视频已静音、计时器该停了。
常见误判场景包括：
- 用户双击 Home 键唤出多任务界面，iOS 不发
visibilitychange - 页面正在播放音频，Safari 强制维持
'visible'（系统认为“媒体仍在运行”） - Service Worker 拦截生命周期，导致事件延迟或丢失
- 代码在
DOMContentLoaded前注册监听，漏掉初始状态变化
visibilitychange 事件不触发？先查这三件事
这个事件只在 document 上触发，不冒泡、不支持委托，绑定错对象就等于没绑。
立即学习“前端免费学习笔记（深入）”；
务必确认：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 监听写在
document.addEventListener('visibilitychange', ...)，不是window或某个 DOM 节点 - 脚本执行时机在 DOM 加载完成之后（避免放在
<head>顶部且无defer） - 不在 iframe 子页面里监听父页面状态——子页面的
document和父页面无关
若仍不触发，加一层容错：
setTimeout(() => {
if (document.visibilityState === 'hidden') {
stopHeartbeat();
}
}, 100);
轮播图/动画组件要不要用 visibilityState 控制启停？
别直接用。轮播图关心的是“是否在用户视口内”，不是“整个页面是否被激活”。用 IntersectionObserver 更准、更轻量。
例如：
const carouselEl = document.querySelector('.carousel');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
startAutoPlay();
} else {
stopAutoPlay();
}
});
}, { threshold: 0 });
observer.observe(carouselEl);
注意两点：
- 容器必须有明确高度（不能
height: auto且子项未渲染），否则 Observer 无法计算相交 -
visibility: hidden或opacity: 0不影响 Observer 判断——如需“真正可见”，得额外检查getComputedStyle(el).visibility !== 'hidden'和parseFloat(getComputedStyle(el).opacity) > 0.1
SSR 和兼容性怎么兜底？
服务端没有 document，直接访问 document.visibilityState 会报错。所有相关逻辑必须包裹在客户端检查中：
if (typeof document !== 'undefined' && 'hidden' in document) {
// 此处写 visibilitychange 监听
}
兼容性方面，现代浏览器全支持，但要注意：
- IE 已淘汰，无需处理
msvisibilitychange前缀 -
'prerender'和'unloaded'在 Chrome 56+ 已废弃，实际不会返回，代码里别做分支处理 - 真机测试不可跳过——iOS 模拟器行为和真机差异极大，尤其涉及锁屏、后台音频等场景
最易被忽略的一点：不要把可见性当成“用户是否在看”的绝对指标。它只是浏览器给出的当前判定，受系统策略、硬件限制、WebView 实现影响极大。关键逻辑（如倒计时、心跳、资源释放）必须搭配服务端时间戳 + 客户端偏差校准，才能真正可靠。
