Page Visibility API

Page Visibility API - Web APIs | MDN

这是一个与 Domcument 有关的 API，主要用来判断当前的 document 是否可见。

具体的用途：

• 暂停/恢复动画和视频：当用户切换到其他标签页时，暂停正在播放的视频或动画，节省系统资源和电量。当用户返回该页面时，再恢复播放。
• 为用户交互提供一些多样性，例如我们切换到其他的 tab 页的时候，博客对应的 tab 的标题变成了“你快回来”。

document.addEventListener("visibilitychange", function () {
  if (document.visibilityState === "hidden") {
    document.title = "你快回来";
  } else {
    document.title = "原始标题";
  }
});

协议以及相关的讨论

GitHub - w3c/page-visibility: Page Visibility

Editorial: remove note about hidden being ‘historical’ by marcoscaceres · Pull Request #64 · w3c/page-visibility · GitHub

其他的资料

Page Lifecycle API 教程 - 阮一峰的网络日志

Page Visibility API 教程 - 阮一峰的网络日志

使用 Page Visibility API  |  Articles  |  web.dev 这篇文章很好地实现了兼容性