通过document.visibilityState和visibilitychange事件可监听页面可见性，visible表示可见，hidden表示不可见，常用于暂停视频、停止轮询以优化性能。
HTML5 的 Page Visibility API 可以帮助开发者检测页面是否处于可见状态，适用于优化资源消耗，比如暂停视频播放、停止轮询或降低动画频率。使用这个 API 很简单，核心是通过 document.visibilityState 属性和 visibilitychange 事件来判断和监听页面可见性变化。
理解 visibilityState 的状态值
通过 document.visibilityState 可获取当前页面的可见性状态，返回以下字符串之一：
- visible：页面内容对用户可见（通常为前台标签页）
- hidden：页面不可见（如切换到其他标签页、最小化窗口或锁屏）
- prerender：页面正在后台预渲染，不可见（较少见）
- unloaded：页面即将被卸载（部分浏览器支持）
最常用的是 visible 和 hidden 两种状态。
监听 visibilitychange 事件
监听页面可见性变化，需监听 visibilitychange 事件：
立即学习“前端免费学习笔记（深入）”；
document.addEventListener('visibilitychange', function() {
if (document.visibilityState === 'hidden') {
console.log('页面已隐藏');
// 可在此暂停视频、停止定时器等
} else {
console.log('页面恢复可见');
// 恢复播放、重启轮询等
}
});
例如，你可以在用户切走时暂停视频播放，回来时继续播放：
const video = document.getElementById('myVideo');
document.addEventListener('visibilitychange', function() {
if (document.visibilityState === 'hidden') {
video.pause();
} else {
video.play().catch(e => console.log('自动播放可能被阻止'));
}
});
检查当前页面是否可见
在页面加载或执行某些操作前，可以先判断当前是否可见：
if (document.visibilityState === 'hidden') {
// 当前不可见，可延迟非关键任务
} else {
// 正常执行
}
这对节省性能和提升用户体验很有帮助，比如轮播图在隐藏时停止自动切换。
兼容性与注意事项
- 现代主流浏览器都支持 Page Visibility API
- 移动端同样适用（切换应用、回到桌面时触发 hidden）
- 注意某些操作如 video.play() 在唤醒时可能被浏览器策略阻止，需捕获异常
- 不要依赖该 API 做安全敏感操作（如防止截图），它仅用于体验优化
基本上就这些。用好 Page Visibility API 能有效提升网页性能和资源利用率，尤其适合长时间运行的应用，比如在线会议、音乐播放器或数据监控面板。不复杂但容易忽略。
