PageVisibilityAPI 核心依据 document.visibilityState，值为"visible"或"hidden"；需用 visibilitychange 事件监听切换，不可轮询；document.hidden 已废弃；注意 iframe、预加载、锁屏等场景的预期行为。
PageVisibilityAPI 的核心判断依据是
这个属性返回字符串值，只有四种可能：
、
、
、
。现代
浏览器
基本只用前两个——
表示页面在前台且内容可被用户看到；
表示页面被切换到后台、最小化、锁屏，或被其他窗口完全遮盖。注意：
在 Chrome 早期支持过，现已废弃；
从未被主流实现。
监听可见性变化必须用
事件，不能轮询
直接读取
只能拿到当前快照，无法捕获切换瞬间。真实场景中（比如暂停视频、暂停心跳上报、节省资源）都需要响应式监听：
该事件不冒泡，也不可取消，绑定在
上即可
不要在
回调里做耗时操作（如发起网络请求），避免阻塞主线程
首次加载时不会触发该事件，需手动检查初始状态：
是兼容写法，但已不推荐单独使用
这是旧版 API 提供的布尔值，等价于
。虽然目前所有支持 Page Visibility 的浏览器都同时支持它，但它丢失了状态细节（比如无法区分
和
），且已被标准标记为 legacy。实际项目中建议统一用
判断，仅在需要兼容 IE10（仅支持
）时才加降级逻辑：
常见误判场景：iframe、标签页预加载、移动端锁屏
这些情况容易让人以为 API 失效，其实是预期行为：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
页面嵌在
中时，父页面不可见不影响子页面的
；但若整个浏览器窗口被遮盖，子页面仍会收到
Chrome 的“预加载”标签页（新标签页预渲染）会让
初始为
，随后变为
，但该行为已在新版中移除，不必再处理
iOS Safari 在锁屏后可能延迟触发
（最长数秒），Android 各厂商 WebView 行为也不一致；不要依赖它做精确计时类逻辑
真正要注意的是：别把
当作页面卸载信号——它和
/
完全不同，页面切走又切回时，它会反复触发，而生命周期事件只在真正离开时发生一次。
document.visibilityState"visible""hidden""prerender""unloaded""visible""hidden""prerender""unloaded"visibilitychangedocument.visibilityStatedocument.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
console.log('页面不可见，可暂停定时器');
} else if (document.visibilityState === 'visible') {
console.log('页面恢复可见，可恢复播放或重连');
}
});documentvisibilitychangeif (document.visibilityState === 'hidden') { ... }document.hiddendocument.visibilityState !== 'visible'prerenderhiddenvisibilityStatehiddenconst isVisible = document.visibilityState ?
document.visibilityState === 'visible' :
!document.hidden;iframevisibilityStatehiddenvisibilityState"prerender""visible"visibilitychangevisibilitychangebeforeunloadpagehide