JavaScript页面可见性API用于检测页面是否对用户可见，通过document.visibilityState、document.hidden和visibilitychange事件实现，可优化资源消耗、暂停视频、停止轮询等，现代浏览器广泛支持。
JavaScript 页面可见性 API 是浏览器提供的一套接口，用来判断当前页面是否对用户可见（比如在前台标签页中显示），还是被隐藏（比如切换到其他标签页、最小化窗口、锁屏等）。它不依赖定时器或焦点事件，而是直接反映页面的真实可见状态，特别适合优化资源消耗，比如暂停视频、停止轮询、节省电量。
核心属性和事件
可见性 API 主要通过 document.visibilityState 和 document.hidden 两个属性，配合 visibilitychange 事件使用：
- document.visibilityState：返回字符串，常见值有 "visible"（页面可见）、"hidden"（页面不可见）、"prerender"（预渲染，较少见）
-
document.hidden：布尔值，true 表示页面隐藏，false 表示可见（兼容旧版，但推荐优先用
visibilityState） - visibilitychange 事件：当页面可见性发生变化时触发，比如用户切走又切回标签页
基础检测写法
监听 visibilitychange 事件是最常用方式，可以实时响应状态变化：
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
console.log('页面变为可见，可恢复动画/轮询/音频');
} else {
console.log('页面被隐藏，建议暂停非必要操作');
}
});
注意：该事件不会在页面首次加载时触发，只在后续状态变化时发生。如需初始化逻辑，应单独检查一次 document.visibilityState。
立即学习“Java免费学习笔记（深入）”；
典型应用场景
合理利用可见性状态，能显著提升性能与用户体验：
- 视频/音频播放：页面隐藏时自动
pause()，恢复时play()（需用户交互授权的自动播放除外） - 定时任务管理：隐藏时
clearInterval()或暂停 WebSocket 心跳，避免无效请求 - 数据同步节流：比如表单草稿保存，可延迟到页面可见时再提交
- 分析埋点：区分“真实浏览时长”，过滤掉后台标签页停留时间
兼容性与注意事项
现代浏览器（Chrome 33+、Firefox 18+、Safari 7+、Edge 12+）均支持标准 API。部分老版本需加前缀，如 webkitVisibilityState，但目前已基本无需处理。
注意两点：
- iFrame 中的页面也拥有独立的可见性状态，父页面不可直接读取子 iframe 的
visibilityState - 手机端锁屏、App 切换到后台、微信内置浏览器切出等场景，多数也触发该事件，但部分 WebView 可能支持不完整
基本上就这些。用好可见性 API，能让网页更聪明地“呼吸”。
