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

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

常用的 API 如下：

1. 实例属性：

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

• document.visibilityState：只读
  返回一个字符串，表示页面的可见性状态。

  • 'visible'：此时页面内容至少是部分可见。即此页面在前景标签页面中，并且窗口没有最小化。
  • 'hidden' ：此时页面对用户不可见。即文档背景标签页或者窗口最小化状态，或者操作系统正一个“锁屏状态”。
  • 'prerender'：页面当前正在渲染中，因此是不可见的（出于目的而被视为隐藏document.hidden）。 文档只能从此状态开始，永远不能从其他值更改此状态。注意：浏览器支持是可选的。

2. 事件：
   • visibilitychange：当页面可见性状态发生变化时触发。

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

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