JavaScript中可通过Page Visibility API的document.visibilityState属性和visibilitychange事件判断页面可见性：'visible'表示前台可见，'hidden'表示隐藏，'prerender'和'unloaded'已基本废弃；推荐用visibilityState替代旧版document.hidden，并监听visibilitychange事件实现资源优化。
JavaScript 中可以通过 Page Visibility API 获取页面当前是否处于可见状态，主要依靠 document.visibilityState 属性和 visibilitychange 事件。
判断当前页面是否可见
使用 document.visibilityState 可以获取页面当前的可见状态，它返回以下字符串之一：
- 'visible'：页面在前台标签页中，且浏览器窗口未被最小化
- 'hidden'：页面不在前台（如切换到其他标签页、窗口最小化、锁屏等）
- 'prerender'：页面预渲染中（部分浏览器支持，但已逐渐废弃）
- 'unloaded'：页面即将卸载（极少用，兼容性差）
注意：document.hidden 是一个布尔值（true/false），是旧版简写方式，推荐优先使用 visibilityState 判断更精确的状态。
监听页面可见性变化
通过监听 visibilitychange 事件，可在用户切换标签页或窗口时及时响应：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
console.log('页面变为可见，可恢复轮询、播放音频等');
} else {
console.log('页面隐藏，建议暂停动画、停止定时器、暂停视频');
}
});
该事件触发时机包括：用户切走/切回标签页、最小化/还原窗口、手机锁屏/解锁、浏览器多任务视图切换等。
典型应用场景与注意事项
Page Visibility API 常用于优化资源消耗和用户体验：
- 暂停/恢复定时器（如
setInterval或 WebSocket 心跳） - 暂停视频或音频自动播放（尤其在 hidden 时避免打扰）
- 暂停 Canvas 动画或 WebGL 渲染，节省 CPU/GPU
- 延迟非关键请求（如埋点上报、日志发送）直到页面可见再执行
注意：Safari 在 iOS 上对 background tab 的行为较特殊（可能冻结 JS 执行），不能完全依赖 visibilitychange；部分 PWA 或 WebView 环境需额外测试兼容性。
简单封装工具函数
可封装一个轻量工具，方便复用：
const visibility = {
get state() {
return document.visibilityState;
},
get isVisible() {
return this.state === 'visible';
},
onVisibilityChange(cb) {
const handler = () => cb(this.isVisible);
document.addEventListener('visibilitychange', handler);
return () => document.removeEventListener('visibilitychange', handler);
}
};
// 使用示例
const cleanup = visibility.onVisibilityChange(visible => {
if (visible) {
startAnimation();
} else {
stopAnimation();
}
});
// 后续可调用 cleanup() 解绑 
