非常有用的H5新api：visibilityState

这是我第10篇简书。

Document.visibilityState：

• visible : 当前页面可见. 即此页面在前景标签页中，并且窗口没有最小化.
• hidden: 页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 '锁屏状态' .
• prerender : 页面此时正在渲染中, 因此是不可见的. 文档只能从此状态开始，永远不能从其他值变为此状态.注意: 浏览器支持是可选的.
• unloaded : 页面从内存中卸载清除. 注意: 浏览器支持是可选的.

前两个用的最多， 用visibilitychange事件进行监听。

document.addEventListener("visibilitychange", function() {
  if(document.visibilityState === "visible"){
    console.log("hello，dxl")
  }
  if(document.visibilityState === "hidden"){
    console.log("离开当前页")
  }
});

应用场景：
监控用户行为，用户进行页面间的切换时，用visibilityState 的状态来进行对应的操作。

例如：

• 当前页不可见，用户的视角不在当前页面时，暂停加载广告，幻灯片、停止加载视频、开始加载小动画等。减少对用户宽带的占用，减少服务器压力，节省用户内存，以及到达更好的播放效果。
• 或者，当页面切换时动态改变document.title页面的标题，例如视角不在那个页面时来了提示信息，当切换到那个页面时，那个页面的title消息提示消失恢复原样，这些应用场景就需要visibilityState 了。