JavaScript 中怎么使用 Page Visibility API 判断页面可见性-js教程-PHP中文网

javascript中可通过page visibility api的document.visibilitystate属性和visibilitychange事件判断页面可见性：'visible'表示前台可见，'hidden'表示隐藏，'prerender'和'unloaded'已基本废弃；推荐用visibilitystate替代旧版document.hidden，并监听visibilitychange事件实现资源优化。

javascript 中怎么使用 page visibility api 判断页面可见性

JavaScript 中可以通过 Page Visibility API 获取页面当前是否处于可见状态，主要依靠 document.visibilityState 属性和 visibilitychange 事件。

判断当前页面是否可见

使用 document.visibilityState 可以获取页面当前的可见状态，它返回以下字符串之一：

'visible'：页面在前台标签页中，且浏览器窗口未被最小化
'hidden'：页面不在前台（如切换到其他标签页、窗口最小化、锁屏等）
'prerender'：页面预渲染中（部分浏览器支持，但已逐渐废弃）
'unloaded'：页面即将卸载（极少用，兼容性差）

注意：document.hidden 是一个布尔值（true/false），是旧版简写方式，推荐优先使用 visibilityState 判断更精确的状态。

监听页面可见性变化

通过监听 visibilitychange 事件，可在用户切换标签页或窗口时及时响应：

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() 解绑