知识点：page visibility （页面可见性）

page visibility API 可以获取到一个网页是否可见的状态，并能获取可见性变化的事件。

属性

• document.hidden（只读）：页面处于隐藏状态时返回true，否则返回false。
• document.visibilityState（只读）： 用来展示文档可见性状态的字符串。可能的值：
  
  • visible：页面可见
  • hidden：页面不可见。页面可能被最小化、或是一个后台标签。
  • prerender：页面内容正在被预渲染。文档可能初始状态为prerender，但绝不会从其它值转为该值。
  • unloaded：页面正在从内存中卸载。
• visibilitychange: 当可见状态改变时候触发的事件。

使用场景

这个API在节约资源上是非常有用的，当网页不可见时，可以选择暂停网页上的一些任务，待页面可见时再继续。如：

• 网站有图片轮播效果或播放视频，只有网页可见时的时候，才会自动展示下一张幻灯片或继续播放视频。
• 显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
• 精确计算在线时长
• 当设备进入待机模式时，网站想要关闭设备声音（用户按下电源键关闭屏幕）

过去只能用onfocus和onblur来确定页面是否失去了焦点，但无法得知页面是否被隐藏。The Page Visibility API 解决了这个问题。