不常用的浏览器 API —— Page Visibility

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情。

这一篇来看 Page Visibility API，相对于之前的内容，这部分 API 使用的地方还是比较多的。Page Visibility 描述的是页面的可见性，这里涉及到什么样的页面是可见，以及一些可见性的相关定义细节，接下来看一下详细的介绍。

用户的页面在前台时称为可见，如果用户最小化窗口，或者切换到其他 tab，这时用户看不到页面内容，此时称为不可见，通常我们可以让一些非必要的工作在不可见时不执行，这时就可以用到这部分内容了。

判断可见性的关键 API 是 document 上的 visibilitychange 事件，一旦页面的可见性发生改变，浏览器会回调这个事件给我们，我们可以做想做的事情。这里需要注意，iframe 的可见性与父级页面相同，不会跟随 css 可见性的变化改变，也就是说只有浏览器控制的页面可见性变化会影响 visibilitychange 事件。

除了这个事件，document 上与可见性相关的还有 hidden 和 visibilityState 两个属性。hidden 很好理解，页面隐藏时为 true，而 visibilityState 标识了完整的页面状态，主要是 visible 和 hidden 两个值，部分浏览器还支持 prerender 和 unloaded 两个值。

来看一下使用的例子：

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
		// ...
  } else  {
		// ...
  }
});

使用 Page Visibility API 实现这种效果还是很简单的，在没有这个 API 之前我们只能通过 onblur 和 onfocus 来处理类似场景，但是这样的判断只能说明用户进行了切换，并不代表真的不可见，Page Visibility API 可以更准确的处理是否可见这个场景，因此使用 Page Visibility API 能做的优化可以更多，适配的场景也更广泛。