17370845950

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。

典型应用场景

合理利用可见性状态，能显著提升性能与用户体验：

• 视频/音频播放：页面隐藏时自动 pause()，恢复时 play()（需用户交互授权的自动播放除外）
• 定时任务管理：隐藏时 clearInterval() 或暂停 WebSocket 心跳，避免无效请求
• 数据同步节流：比如表单草稿保存，可延迟到页面可见时再提交
• 分析埋点：区分“真实浏览时长”，过滤掉后台标签页停留时间

兼容性与注意事项

现代浏览器（Chrome 33+、Firefox 18+、Safari 7+、Edge 12+）均支持标准 API。部分老版本需加前缀，如 webkitVisibilityState，但目前已基本无需处理。

注意两点：

• iFrame 中的页面也拥有独立的可见性状态，父页面不可直接读取子 iframe 的 visibilityState
• 手机端锁屏、App 切换到后台、微信内置浏览器切出等场景，多数也触发该事件，但部分 WebView 可能支持不完整

基本上就这些。用好可见性 API，能让网页更聪明地“呼吸”。