如何用JavaScript检测浏览器哪个选项卡是空闲的？

本文共计1086个文字，预计阅读时间需要5分钟。

在特定情境下，用户与我们的最终产品或应用软件互动时，我们发现自身会执行占用大量CPU资源的任务。例如，启动轮询器、建立WebSocket连接、甚至加载视频或图片等媒体。

在某些情况下，当用户与我们的最终产品或应用程序进行交互时，我们发现自己会执行许多密集的，占用大量CPU的任务。启动轮询器，建立WebSocket连接，甚至加载视频或图片等媒体，都有可能成为性能障碍，尤其是当这些任务在不需要的情况下消耗资源的时候。

在用户没有主动与界面交互的同时，从不必要的工作负载或网络请求中释放主线程是一个非常好的和有意义的实践。换一种方式，在大多数主机提供商都在引入基于配额的定价模式的行业中，减少网络请求也可以降低运行应用程序或服务的成本。

页面可见性(Page Visibility) API

所有现代的网页浏览器都加入了页面可见性API，它允许我们检测浏览器的标签页何时被隐藏，此外，我们还可以注册一个事件监听器，以检测可见性变化时的信号。

document.visibilityState

当页面处于前台时，document.visibilityState 可能是 visible ，最小化窗口的“标签”或隐藏。

我们可以通过以下方式直接访问 document.visibilityState：

console.log(document.visibilityState); // => 它可以是“visible”或“hidden”

visibilitychange Event

我们还可以使用事件侦听器轻松检测可见性属性中的更改。