Page Visibility API 页面可见性

首先来谈谈页面可见性。

    页面可见性，简单的解释就是页面可见，也就是你能看到页面。

Page Visibility API定义了2个只读的document属性

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

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

    ---visible : 页面内容至少部分可见。

    ---hidden : 页面内容对用户不可见。

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

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

visibilitychange监听事件：

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

常用的使用场景：

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

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

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

接下来以第二点为例，进行简单的代码实现

    ① html 代码部分

定义一个audio音频标签

    ② js代码部分

③ 效果：

    当页面可见时，音频会自动播放；当页面不可见时，音频会自动暂停。

至此Page Visibility API 的简单使用也就完成了。