如何利用浏览器的可见性API优化网站性能

最近在使用微软AI聊天工具Bing时，发现一个有趣的东西。我向它提问后，它在持续输出的过程中，如果我离开了当前它的浏览器会话，比如切屏，看当前浏览器的其它标签页，它会默认停止它的输出，等我回来它才继续。我们来探讨一下这个现象的实现方式，以及它的作用。

什么是浏览器的可见性API

浏览器的可见性API是一种JavaScript的接口，它可以让你知道一个页面什么时候是隐藏的，什么时候是显示的。

当用户最小化窗口或切换到另一个标签页时，API会发送visibilitychange事件，让监听者知道页面的状态已发生变化。你可以检测到该事件并执行某些操作或采取不同的行为。例如，如果你的web应用正在播放视频，当用户将标签页放到后台时，它可以暂停视频，当用户返回标签页时，它又可以恢复播放。

浏览器的可见性API可以让你在页面不可见时避免执行不必要的任务，这对于节省资源和提高性能特别有用。例如，你可以在页面隐藏时停止动画或轮询服务器，从而减少CPU和网络的消耗。

如何使用浏览器的可见性API

要使用浏览器的可见性API，你需要了解以下几个概念：

document.hidden属性：这是一个只读的布尔值，如果页面处于隐藏状态，则返回true，否则返回false。
document.visibilityState属性：这是一个只读的字符串，表示页面的当前可见性状态。可能的值有：
- visible：页面内容至少部分可见。在实践中，这意味着页面是非最小化窗口的前景选项卡。
- hidden：页面内容对用户不可见，原因可能是文档标签页在后台或属于最小化窗口的一部分，也可能是设备屏幕关闭。
- prerender：页面正在预渲染，尚未对用户可见。这个状态只在支持预渲染的浏览器中存在，比如Chrome。
- unloaded：页面正在从内存中卸载。这个状态只在支持页面卸载事件的浏览器中存在，比如Firefox。
visibilitychange事件：这是一个事件，当页面的可见性状态发生变化时触发。你可以给document对象添加一个事件监听器，来处理这个事件。

浏览器的可见性API的示例

下面是一个简单的示例，用浏览器的可见性API来实现一个简单的数据绑定，当页面可见时，显示当前的时间，当页面隐藏时，停止更新时间：

html
<html>
<head>
  <style>
    #time {
      font-size: 36px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="time"></div>
  <script>
    // 获取页面上的元素
    let timeElement = document.getElementById("time");

    // 定义一个变量，用来存储定时器的ID
    let timerId = null;

    // 定义一个函数，用来更新时间
    function updateTime() {
      // 获取当前的时间
      let now = new Date();
      // 格式化时间为HH:MM:SS
      let timeString = now.toTimeString().slice(0, 8);
      // 更新页面上的元素的内容
      timeElement.textContent = timeString;
    }

    // 定义一个函数，用来处理页面可见性变化的事件
    function handleVisibilityChange() {
      // 如果文档变为可见，更新时间并启动定时器
      if (document.visibilityState === "visible") {
        updateTime();
        timerId = setInterval(updateTime, 1000);
      }
      // 如果文档变为隐藏，清除定时器
      else if (document.visibilityState === "hidden") {
        clearInterval(timerId);
      }
    }

    // 监听文档的可见性变化事件
    document.addEventListener("visibilitychange", handleVisibilityChange);

    // 启动定时器
    timerId = setInterval(updateTime, 1000);
  </script>
</body>
</html>

你可以在浏览器中运行这个代码，然后切换标签页或最小化窗口，看看页面上的时间的变化。

浏览器的可见性API的应用场景

浏览器的可见性API有很多有用的应用场景，比如：

网站有图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一张幻灯片。
显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
页面想要检测何时正在预渲染，以便可以准确的计算页面浏览量。
当设备进入待机模式（用户按下电源键关闭屏幕）时，网站想要关闭设备声音。

浏览器的可见性API的兼容性和注意事项

浏览器的可见性API是一个比较新的特性，它在大多数现代浏览器中都有支持，但在一些老版本的浏览器中可能不兼容。如果你想让你的代码在不支持的浏览器中也能运行，你可以使用一些polyfill或shim的方法。

另外，你还需要注意以下几点：

浏览器的可见性API只能检测页面是否处于前台或后台，不能检测页面是否被遮挡或半透明。
浏览器的可见性API只能检测标签页的可见性，不能检测<iframe>的可见性。如果你想检测<iframe>的可见性，你需要在<iframe>内部的文档中使用浏览器的可见性API。
浏览器的可见性API不能检测用户是否真的在关注页面，只能检测页面是否有可能被用户看到。如果你想检测用户是否真的在关注页面，你可能需要使用其他的方法，比如检测用户的鼠标或键盘活动，或者使用WebGazer.js等工具来实现眼球追踪。

总结

浏览器的可见性API是一种JavaScript的接口，它可以让你知道一个页面什么时候是隐藏的，什么时候是显示的。

你可以使用document.hidden和document.visibilityState属性来获取页面的可见性状态，也可以使用visibilitychange事件来监听页面的可见性变化。

浏览器的可见性API可以让你在页面不可见时避免执行不必要的任务，从而节省资源和提高性能。浏览器的可见性API有很多有用的应用场景，比如暂停视频，停止轮播，关闭声音等。浏览器的可见性API在大多数现代浏览器中都有支持，但在一些老版本的浏览器中可能不兼容，你可以使用一些polyfill或shim的方法来解决这个问题。

浏览器的可见性API还有一些注意事项，比如不能检测页面是否被遮挡或半透明，不能检测<iframe>的可见性，不能检测用户是否真的在关注页面等。

目录

什么是浏览器的可见性API

如何使用浏览器的可见性API

浏览器的可见性API的示例

浏览器的可见性API的应用场景

浏览器的可见性API的兼容性和注意事项

总结