页面可见性 API，可以帮助我们检测当前用户是不是还在当前页面，当网页被最小化或者切换到其他 tab 的时候，会触发一个 visibilitychange 事件，我们就可以在这个时候去停掉一些耗时的操作来节省资源。

Page Visibility API 带来了两个属性和一个事件，用于访问页面可见性状态：

document.hidden：该属性是全局可见并且只读。尽量避免使用该属性，因为现在已经被废弃了。当访问该属性时，如果页面是隐藏状态则返回true，如果页面是可见状态则返回false。

document.visibilityState：该属性是document.hidden更新后的版本。当访问该属性时，会根据页面的可见性状态返回四个可能的值：
visible：该页面是可见的，或者准确地说，它没有被最小化，也不在另一个标签页。
hidden：该页面不可见，它是最小化的，或者在另一个标签页。
prerender：这是一个可见页面在预渲染时的初始状态。一个页面的可见性状态可以从prerender开始，然后改变到另一个状态，但它不能从另一个状态改变到prerender。
unloaded：该页面正在从内存中卸载。

visibilitychange

这是一个由document 对象提供的事件，当页面的 visibilityState 发生变化时被触发。

  1. document.addEventListener(visibilityChange, handleVisibilityChange, false);
  3. function handleVisibilityChange() {
  4.   if (document.hidden) {
  5.     // 页面隐藏了
  6.   } else {
  7.     // 页面又活跃了
  8.   }
  9. }