在code review时看见同事使用visibilitychange 事件来监听页面的隐藏与显示，之前没有了解过这块，学习一下。

document.visibilityState

主要有以下3个状态：

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

hidden状态和visible状态是所有浏览器都支持的。prerender状态仅支持预渲染的浏览器

注意：The Page Visibility API defines a means to programmatically determine the visibility state of a top level browsing context, and to be notified if the visibility state changes(就是说document.visibilityState属性只针对顶层窗口)

只要页面可见，哪怕页面只展示一点document.visibilityState属性就返回visible。以下四种情况会返回hidden。

• 浏览器最小化。
• 浏览器没有最小化，但是当前页面切换成了背景页（相当于被别的页面覆盖）。
• 浏览器将要卸载（unload）页面。
• 操作系统触发锁屏屏幕。

页面卸载和不可见都会触发visibilitychange事件

document.hidden

如果document.visibilityState = visible 那么document.hidden=false

注意document.hidden 是历史遗留，如果可能尽量使用document.visibilityState

visibilitychange 事件

document.onvisibilitychange 或 document.addEventListener()

实例页面隐藏暂停播放，显示继续播放

function handleVisibilityChange() {
  if (document.visibilityState == "hidden") {
    videoElement.pause();
  } else {
    videoElement.play();
  }
}

document.addEventListener('visibilitychange', handleVisibilityChange, false);

参考资料：

Page Visibility Level 2

Page Visibility API 教程

Page Visibility API