早些时候，我们的浏览器不具有选项卡式浏览功能，但今天，当您查看所有可用的浏览器时，我们可以看到所有浏览器都提供该功能。作为一名程序员，我通常一次打开10-15个选项卡，有时这个数字会超过25-30个。
为什么使用此API？
之前，无法确定哪个选项卡处于活动状态、哪个选项卡处于活动状态，但借助HTML5VisibilityAPI，我们可以检测访问者是否正在查看我们的网页。
在本教程中，我们将了解如何处理HTML5VisibilityAPI以及一个简单的演示来发现页面的状态。在此演示中，我们将根据页面可见性状态更改文档标题。
立即学习“前端免费学习笔记（深入）”；
检查页面的可见性状态
随着此API的推出，我们迎来了两个新的文档属性，它们具有两种不同的功能。第一个是document.visibilityState，第二个是document.hidden。
document.visibilityState包含四个不同的值，如下所示：
- 隐藏：页面在任何屏幕上都不可见
- 预渲染：页面在屏幕外加载并且对用户不可见
- 可见：页面可见
- 已卸载：页面即将卸载（用户正在离开当前页面）
document.hidden是布尔属性，如果页面可见则设置为false，如果页面隐藏则设置为true。
现在，当我们的网站对用户隐藏时，我们可以控制网站的行为方式。
我们立刻就知道了我们的可用性属性，但现在是时候侦听该事件了，以便我们可以收到有关页面可见性的新情况的通知。这是通过visibilitychange事件完成的。我们将看到有关如何处理此事件的快速演示。