web的页面可见性——visibilityChange | document.hidden

因为有了带标签页的浏览器，页面可以处于后台并且对于用户不可见。Page Visibility API提供了监听document变为可见或者不可见的事件触发，也提供了表示当前页面可见行状态的属性。
这个API在保存资源和提高性能时非常有用，因为它可以避免在document处于不可见状态时，执行不必要的的任务。

的可见性状态和document一样。使用CSS属性(display: none)将隐藏时，`不会触发`任何可见性事件或者更改frame中的可见性状态。

页面可见

visiblechange事件

当页面被最小化或者变成后台标签页时，页面为不可见状态。浏览器会在document触发一个visibilitychange事件，并且设置属性document.hidden = true；
当打开页面或者点击标签页，即页面展示时，页面为可见状态。浏览器也会在document触发一个visibilitychange事件，并且设置属性document.hidden = false；
（hidden为只读属性）

document.visibilityState属性

visibilitychange事件中没有包含页面的可见性状态，但是只读属性document.visibilityState可以获取到这个值。
可能的取值为

• “visible” 页面至少部分可见，
  1. 页面处于一个非最小化的前台标签页
• “hiddin” 页面内容不可见
  1. document的标签页处于后台
  2. 窗口被最小化
  3. 设备的屏幕被关闭。
• “prerender”
  页面的内容处于预渲染过程中，因为对用户不可见。document都从prerender状态开始，但是不能从其他任何状态再变为这个状态，因此ducument只能被预渲染一次。
• “unloaded”
  页面正在从内存中加载。

不是所有浏览器都支持unloaded

document.addEventListener(“visibilitychange”, handleVisibilityChange, false);

实例

跳出页面后暂停视频播放
打开页面后播放视屏内容

document.addEventListener("visibilitychange", function()