页面可见性 API

页面可见性 API 提供了一些事件，你可以通过查看这些事件来了解文档何时变为可见或隐藏，还提供了一些功能来查看页面的当前可见性状态。

通过让页面在文档不可见时避免执行不必要的任务，这对于节省资源和提高性能特别有用。

常用的 API 如下：

1. 实例属性

• Document.hidden 已弃用 只读
  如果页面处于隐藏状态，则返回 true，否则返回 false。

• Document.visibilityState 只读
  说明文档当前可见性状态的字符串。可能的值有：

2. 事件

visibilitychange
当标签页的内容变为可见或被隐藏时触发。

const audio = document.querySelector("audio");

// 处理页面可见性变化：
// - 如果页面隐藏，暂停音频
// - 如果页面显示，播放音频
document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    audio.pause();
  } else {
    audio.play();
  }
});