JavaScript 页面可见性 Page Visibility API 监听用户离开页面

一、API 简介

Page Visibility API 用来检测页面当前是否可见，以及打开网页的时间等

以前监听用户正在离开页面常用的方法是下面三个事件：

1、pagehide
2、beforeunload
3、unload

但这些事件在手机上不触发，因为手机系统可以将进程直接转入后台，然后杀死，为了解决这个问题，就诞生了 Page Visibility API
不管手机或桌面电脑，所有情况下，这个 API 都会监听到页面的可见性发生变化
这个 API 常用于页面被切换到其他后台进程时，自动暂停音乐或视频的播放，达到节省资源，减缓电能消耗等效果

二、document.visibilityState 属性

这个 API 主要在 document 对象上，新增了一个 document.visibilityState 属性，该属性返回一个字符串，表示页面当前的可见性状态，共有三个可能的值：

1、hidden：页面彻底不可见
2、visible：页面至少一部分可见
3、prerender：页面即将或正在渲染，处于不可见状态

关于 hidden & visible，

hidden 状态和 visible 状态是所有浏览器都支持的
只要页面可见，哪怕只露出一个角，document.visibilityState 属性就返回 visible，只有以下四种情况，才会返回 hidden：

1、浏览器最小化
2、浏览器没有最小化，但是当前页面切换成了背景页
3、浏览器将要卸载（unload）页面
4、操作系统触发锁屏屏幕

关于 prerender，

prerender 状态只在支持"预渲染"的浏览器上才会出现，比如 Chrome，可以在用户不可见的状态下，预先把页面渲染出来，等到用户要浏览的时候，直接展示渲染好的网页

可以看到，上面四种场景涵盖了页面可能被卸载的所有情况
也就是说，页面卸载之前，document.visibilityState 属性一定会变成 hidden

三、visibilitychange 事件

只要 document.visibilityState 属性发生变化，就会触发 visibilitychange 事件
因此，可以通过监听这个事件跟踪页面可见性的变化，举个例子：

document.addEventListener('visibilitychange', function () {
  // 用户离开了当前页面
  if (document.visibilityState === 'hidden') {
    document.title = '页面不可见';
  }

  // 用户打开或回到页面
  if (document.visibilityState === 'visible') {
    document.title = '页面可见';
  }
});

上面代码是 Page Visibility API 的最基本用法，可以监听可见性变化
下面是另一个例子，一旦页面不可见，就暂停视频播放:

var vidElem = document.getElementById('video-demo');
document.addEventListener('visibilitychange', startStopVideo);

function startStopVideo() {
  if (document.visibilityState === 'hidden') {
    vidElem.pause();
  } else if (document.visibilityState === 'visible') {
    vidElem.play();
  }
}