开始使用页面可见性API

当我们使用浏览器标签浏览网页时，有可能部分（或大部分）标签对用户来说一次都不可见。页面可见性API是一个浏览器API，它提供了一种方法来确定哪些浏览器标签当前处于活动或闲置状态。

当我们需要减少后台任务所消耗的资源并改善浏览的用户体验时，这一点很有用。在本教程中，我们将通过建立一个利用HTML5视频标签的简单网页来介绍页面可见性API的基础知识。

前提条件

要跟上本教程，读者需要。

需要有对[JavaScript]语言和[HTML]的基本了解。
一个代码编辑器，最好是[VS Code]。
我们将需要一个浏览器。我将使用[谷歌浏览器]。

目标

在本教程结束时。

我们将学习如何使用HTML5媒体标签，特别是视频标签。
我们将学习JavaScript页面可见性API如何工作，以控制我们应用程序中的各种功能。
我们将通过建立一个简单的网页，根据标签的空闲程度控制视频播放，来了解API的作用。
我们将研究利用API获得最佳网络体验的优势。

页面可见性API简介

页面可见性API是一个浏览器接口，它告诉你的JavaScript应用程序，如果页面对用户可见或在后台运行。

它有几个功能，可以通过document 对象访问。

document.hidden 是一个属性，将返回一个布尔值，当标签被隐藏时为真，当标签可见时为假。
document.visibilityState 将返回一个字符串，表示当前标签的可见状态。其值可以是 , 或 prerender。hidden visible
visibilitychange 是一个事件，当用户切换到另一个标签时被触发。当用户离开或恢复到某个标签时，API会发出这个事件。该API让监听器检测窗口或标签的可见性状态变化，并根据该状态执行不同的动作。

下面是一个监听标签可见性状态并在浏览器控制台记录信息的例子代码片断。

       document.addEventListener("visibilitychange",()=>{
           if(document.visibilityState==="hidden"){
               console.log(" >> This window is hidden")
           }
           else{
               console.log(" >> This window is visible")
           }
       })

页面可见性API的常见用途

不是每个用户都能获得快速的网速，通过构建你的应用程序，即使应用程序在后台运行时，也能有利于每个人。

我发现页面可见性API很有用，因为它能使应用程序省电，提高性能，同时让应用程序在后台运行时避免不必要的任务，从而利用更少的资源。

这个API的一些常见用途包括。

页面可见性API被用来控制网络媒体。图片和视频在现在的网络上很常见。如果用户没有浏览网页，我们可以取消网络请求，以减少网络带宽。或者，我们可以取回不完整的图片或视频，以便在再次活动时给出一个完全加载的网站。这取决于你想为你的网站实现什么。在本文后面的章节中，我将通过设计一个简单的网页来演示如何使用这个API，如果窗口标签在后台空闲，它会自动暂停视频播放，并在再次活动时恢复。
用webpack进行异步加载。当用户不查看我们的页面时，我们可以使用webpackdynamic import() 请求下载我们应用程序的剩余包，并对资产进行缓存，这样当标签再次激活时，它们就可以使用。
控制一个iframe 、广告和动画的可见性状态。我们可以决定在用户当前正在查看应用程序时显示广告或动画。
当浏览器标签闲置时，该API被用来取消基于时间的事件，以提高性能。一个例子是，如果标签窗口处于空闲状态，就会取消对数据库的轮询调用，以更新管理仪表板。
在网络（尤其是实时）应用中，一个常见的做法是暂停网络套接字和EventSource与服务器的连接，并在标签激活时恢复。这在电池寿命和数据带宽有限的移动设备上是很有利的。
像setTimeout() 这样的定时器可以在后台标签中被节制，以减少资源并优化网络体验。

设计应用程序

在本教程中，我们将编写一个简单的JavaScript代码，检测闲置的浏览器标签，以确定是否播放或暂停视频。这对用户是有帮助的，因为它有助于节省后台任务所消耗的带宽。

首先，创建一个名为video-site 的文件夹，并添加两个名为index.html 和app.js 的文件。我们还将在我们的video-site 文件夹内添加一个名为videos 的文件夹，用于存放我们的视频。在你的机器上抓取任何一个视频来跟随。

我将首先在index.html 文件中编写代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Using Page Visibility API</h1>

    <video id="video" controls>
        <source id="mp4" src="/videos/my_video.mp4"  type="video/mp4" />
        <p>Your Browser does not support HTML videos.</p>
    </video>

<script src="app.js" defer></script>
</body>
</html>

HTML代码是非常直接的。我们有一个嵌入式视频标签，一个<h1> 标签作为标题，还有一个指向我们脚本的链接。

现在让我们给脚本编码，以观察我们的标签并确定是否播放或暂停我们的视频。

这里是正在运行的API。

        const video = document.querySelector("video")

       document.addEventListener("visibilitychange",()=>{
           if(document.visibilityState==="hidden"){
               console.log(" >> This window is hidden")
               video.pause()
           }
           else{
               console.log(" >> This window is visible")
               video.play()
           }
       })

document.querySelector() 将抓取视频DOM元素并将其分配给名为video 的变量。然后，我们使用窗口属性document.addEventListener() 来创建一个事件监听器，以检测浏览器标签是否有变化的visibilitychange 事件。

在我们的回调函数里面，if 和else 条件语句将根据需要更新状态回放，同时在控制台记录一条信息。

为了测试这一点，启动视频，然后导航到一个新标签。视频应该立即暂停，并在标签激活时开始。

注意：有些移动浏览器不允许在你导航到另一个标签时自动播放，直到用户点击播放按钮。

结论

随着多标签成为网上冲浪的常态，我们可以利用这个API提供更好的用户体验，减少后台任务和网络活动。这篇文章通过建立一个视频控制播放网页向你介绍了这个API。

如何使用页面可见性API

开始使用页面可见性API

前提条件

目标

页面可见性API简介

页面可见性API的常见用途

设计应用程序

结论