Page Visibility API

不知道小伙伴们，在平时玩手机的时候有没有注意到，当我们切换手机app的时候，一系列正在运行的App一览无余，而有个时候我们可以看到有些APP即使我们没有真正的进入，但是它的视频或者广告动图在你切换的那瞬间是活跃的状态，那这种是怎么实现的呢？

        Page Visibility API 判断页面是否处于浏览器的当前窗口，这API部署在document对象上，它提供了一种检测页面是否可见的方法。我们可以通过 Page Visibility API知道当前页面的最新状态，是否被隐藏，最小化、最大化、还是切换标签页，从而可以根据页面的可见性来控制页面的行为和资源的使用。

Page Visibility API 提供了 2 个属性和 1 个事件，分别是：

1. 属性

1. document.hidden：返回一个布尔值，表示当前是否被隐藏，只读
2. document.visibilityState：只读，表示页面当前的状态，有四个可能值：visibile（页面可见）、hidden（页面不可见）、prerender（页面正处于渲染之中，不可见）、unloaded（如果文档被卸载了）
3. 在使用这两个属性时，要加上不同浏览器的私有前缀；

2. 方法

• visibilitychange：当页面的可见性状态发生变化时触发该事件。

  document.addEventListener('visibilitychange', function () {
    // 用户离开了当前页面
    if (document.visibilityState === 'hidden') {
      console.log('haorooms测试-页面不可见');
      //进行你的代码逻辑操作
    }
  
    // 用户打开或回到页面
    if (document.visibilityState === 'visible') {
      console.log('haorooms测试-页面可见');
      //进行你的代码逻辑操作
    }
  });

3. 参考链接

 https://segmentfault.com/a/1190000043797682

https://www.haorooms.com/post/page_api_cst