visibilitychange 事件（最佳实践）

什么是 visibilitychange 事件

在现代网页开发中，我们常常需要感知用户当前是否正在查看页面。比如，当你在浏览器中切换标签页时，页面其实并没有真正“关闭”，但用户已经“看不见”它了。这种场景下，如果页面还在持续播放视频、轮询数据或执行高耗能任务，不仅浪费资源，还可能影响用户体验。

这就是 visibilitychange 事件的用武之地。它是 HTML5 提供的一个重要事件，专门用于检测页面的可见性状态变化。当用户切换标签页、最小化浏览器窗口，或者将浏览器置于后台时，浏览器会自动触发这个事件，并提供一个明确的状态标识。

你可以把 visibilitychange 事件想象成一个“状态哨兵”——它默默守在后台，一旦发现页面被隐藏，就会立刻发出通知。这种机制让开发者能够及时响应用户的实际行为，做出更智能的处理。

这个事件是 Document 对象的事件，因此监听它只需要绑定在 document 上即可。它的触发时机非常精准，能帮助我们优化性能、节省电量，尤其对移动端和多媒体应用尤为重要。

visibilitychange 事件的触发场景

visibilitychange 事件会在以下几种常见场景下被触发：

用户切换到其他标签页（如从“博客页面”切换到“微信”）
浏览器窗口被最小化或隐藏
用户锁屏或切换到其他应用
页面被其他应用覆盖（如弹出对话框、全屏模式等）

举个生活化的例子：你正在看一个在线视频，突然切换到微信聊天，视频自动暂停，这就是 visibilitychange 事件发挥作用的体现。当页面不可见时，系统会自动停止播放，避免浪费流量和电量。

相反，当用户重新切回页面时，事件也会再次触发，此时可以恢复播放、更新数据或重新激活定时器。

这些行为并非由用户手动操作触发，而是浏览器在后台自动判断并通知页面。通过监听 visibilitychange 事件，开发者可以像“指挥官”一样，根据页面的可见状态，灵活控制程序的运行策略。

使用 visibilitychange 事件的基本语法

使用 visibilitychange 事件非常简单，核心是监听 document 的 visibilitychange 事件，并通过 document.visibilityState 属性获取当前可见状态。

// 监听 visibilitychange 事件
document.addEventListener('visibilitychange', function () {
  // 输出当前页面的可见状态
  console.log('页面可见状态:', document.visibilityState);
});

这里的 document.visibilityState 是一个只读属性，返回一个字符串，表示当前页面的可见状态。它有三种可能的值：

状态值	含义说明
`visible`	页面对用户可见，处于前台标签页
`hidden`	页面不可见，处于后台标签页或被最小化
`prerender`	页面正在预渲染，尚未对用户可见（较少见）

💡 提示：prerender 状态通常出现在浏览器预加载页面时，比如用户在地址栏输入网址，浏览器提前加载页面，但还未展示给用户。这个状态在实际开发中较少使用，我们主要关注 visible 和 hidden。

实际应用：自动暂停视频播放

让我们通过一个真实案例来展示 visibilitychange 事件的价值。假设你正在开发一个在线视频播放器，希望在用户切换标签页时自动暂停播放，以节省资源。

// 获取视频元素
const video = document.querySelector('video');

// 监听 visibilitychange 事件
document.addEventListener('visibilitychange', function () {
  // 判断当前页面是否隐藏
  if (document.visibilityState === 'hidden') {
    // 页面不可见，暂停播放
    video.pause();
    console.log('视频已暂停：页面已隐藏');
  } else {
    // 页面重新可见，恢复播放
    video.play();
    console.log('视频已恢复播放：页面已回到前台');
  }
});

在这个例子中：

当用户切换到其他标签页时，visibilityState 变为 hidden，视频立即调用 pause() 方法停止播放。
当用户切回当前页面，状态变为 visible，play() 方法被调用，视频自动继续播放。

这个功能看似简单，实则极大提升了用户体验和性能。尤其在移动端，后台播放视频会迅速耗尽电池，而 visibilitychange 事件正是解决这一问题的关键。

更高级的优化：控制定时器与轮询

除了视频播放，许多应用依赖定时任务（如轮询服务器获取新消息、刷新图表数据）。如果页面被隐藏时仍持续轮询，不仅浪费网络流量，还可能被服务器限流。

我们可以通过 visibilitychange 事件来动态控制定时器的启停。

// 定义轮询函数
function fetchData() {
  console.log('正在从服务器获取最新数据...');
  // 模拟网络请求
  fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log('数据更新:', data))
    .catch(err => console.error('请求失败:', err));
}

// 创建定时器
let intervalId = setInterval(fetchData, 5000);

// 监听 visibilitychange 事件
document.addEventListener('visibilitychange', function () {
  if (document.visibilityState === 'hidden') {
    // 页面隐藏，清除定时器
    clearInterval(intervalId);
    console.log('定时器已清除：页面不可见');
  } else {
    // 页面可见，重新启动定时器
    intervalId = setInterval(fetchData, 5000);
    console.log('定时器已重新启动：页面已恢复');
  }
});

这个方案的优势在于：

页面隐藏时，定时器自动停止，避免无效请求
页面恢复后，定时器自动恢复，保持数据实时性
无需手动管理状态，由事件驱动，逻辑更清晰

这正是 visibilitychange 事件在复杂应用中的典型用法，体现了“按需执行”的设计理念。

兼容性与最佳实践

尽管 visibilitychange 事件在现代浏览器中广泛支持，但仍需注意兼容性问题。大多数主流浏览器（Chrome、Firefox、Safari、Edge）都支持此事件，但部分旧版本可能存在兼容问题。

建议使用如下方式判断浏览器是否支持：

if ('visibilityState' in document) {
  // 支持 visibilitychange 事件
  document.addEventListener('visibilitychange', handleVisibilityChange);
} else {
  // 降级处理，比如使用定时器轮询或默认行为
  console.warn('当前浏览器不支持 visibilitychange 事件');
}

此外，还有一些最佳实践建议：

不要在 hidden 状态下执行高耗能任务：如大量计算、动画渲染、Web Worker 活跃等。
合理利用事件回调：在 visible 状态恢复时，可以执行数据同步、通知更新等操作。
结合其他事件使用：比如与 pagehide、pageshow 事件配合，实现更完整的页面生命周期管理。
避免频繁切换状态导致抖动：某些场景下频繁切换标签页，可能引发事件风暴，建议加入防抖机制。

总结

visibilitychange 事件是前端开发中一个“隐形但强大”的工具。它帮助我们感知用户是否真的在“看”页面，从而做出更智能的响应。

无论是暂停视频、停止轮询，还是延迟动画渲染，这个事件都能让我们的应用更加高效、节能、友好。尤其在移动设备上，它几乎是提升用户体验的标配。

作为开发者，掌握 visibilitychange 事件不仅是一种技术能力，更是一种“用户视角”的体现——我们不再只关心代码是否运行，而是思考“用户是否在看”。

当你下次开发一个带定时任务或媒体播放的页面时，不妨试试加入 visibilitychange 事件。它可能不会立刻改变功能，但一定会让应用变得更“聪明”。