首先来谈谈页面可见性。
页面可见性，简单的解释就是页面可见，也就是你能看到页面。
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 的简单使用也就完成了。
