浅谈页面可见性API

1、页面可见性：

①　一次可以打开好多标签页，标签页可以来回切换，但始终只有一个页面在眼前，其他标签页是隐藏的。

②　把浏览器最小化，所有的标签页就都不可见了。

2、页面可见性API定义了2个只读的document属性：

①　document.hidden：返回一个布尔值，true表示页面可见，false则表示页面隐藏。

②　document.visibilityState：表示页面所处的状态，取值可能有四个：

---visible : 页面内容至少部分可见。这意味着在实际情况中，该网页是一个非最小化窗口的可见标签页。

---hidden : 页面内容对用户不可见。这意味着该文档是后台标签页或最小化窗口的一部分，或者是系统锁屏时的状态。

---prerender : 网页内容被预渲染并且用户不可见。

---unloaded : 如果文档被卸载，将返回这个值。

3、visibilitychange监听事件：

可以在document对象上注册一个监听visibilitychange事件，根据document.hidden或document.visibilityState属性做一些业务逻辑。

4、页面可见性的用途：

①　对那些定期刷新内容的页面进行控制，当该页面不可见则不刷新，可见则刷新。

②　根据页面的是否可见来暂停和继续音频或视频的播放，在页面被切换不可见时，自动暂停音乐或视频的播放。

③　根据页面可见性计算用户停留在本页面的更为精确的数据，而不仅仅是打开页面而不停留在本页面。