JavaScript页面可见性_标签页状态监听

页面可见性API通过document.visibilityState和visibilitychange事件检测页面是否可见，其状态值包括visible、hidden、prerender和unloaded；当标签页切换时触发visibilitychange事件，开发者可据此暂停视频、停止轮询或动画等操作以优化性能；例如控制轮播图在页面隐藏时停止、恢复时重启，从而节省资源并提升用户体验。

当用户切换浏览器标签页时，有时需要让页面暂停某些操作，比如视频播放、轮询请求或动画效果。JavaScript 提供了 Page Visibility API，可以监听页面是否处于可见状态，从而优化性能和用户体验。

什么是页面可见性 API？

Page Visibility API 允许开发者检测当前页面是否处于“可见”状态。它通过 document.visibilityState 属性和 visibilitychange 事件来实现。

document.visibilityState 返回一个字符串，可能的值有：

• visible：页面在前台且可见（正常浏览）
• hidden：页面不可见（最小化、切换标签、锁屏等）
• prerender：页面正在预渲染（少见）
• unloaded：页面即将卸载（已废弃）

如何监听标签页状态变化？

使用 visibilitychange 事件监听页面可见性变化：

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'hidden') {
    console.log('页面已隐藏');
    // 可以暂停视频、停止轮询、关闭动画
  } else {
    console.log('页面恢复可见');
    // 恢复播放、重启定时任务
  }
});

实际应用场景示例

以下是一些常见用途：

• 暂停视频或音频播放，节省流量和资源
• 停止不必要的定时器（如每秒更新的数据请求）
• 避免在不可见时执行复杂计算或动画
• 记录用户停留时间（只在 visible 状态下计时）

例如，控制自动轮播图：

let interval;

function startCarousel() {
  interval = setInterval(() => {
    // 轮播逻辑
  }, 3000);
}

function stopCarousel() {
  clearInterval(interval);
}

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    stopCarousel();
  } else {
    startCarousel();
  }
});

// 初始化
startCarousel();

兼容性与注意事项

现代浏览器普遍支持 Page Visibility API。如果需要兼容老版本 IE，可添加前缀检查：

const visibilityEvent = 'visibilitychange';
// 更完整的监听可考虑兼容旧版 WebKit
document.addEventListener(visibilityEvent, handleVisibilityChange);

注意：该 API 不会监听页面是否被遮挡（如弹窗覆盖），仅反映是否在当前标签可见。

基本上就这些。用好 visibilitychange 事件，能有效提升网页性能和资源利用率。不复杂但容易忽略。