看文章的时候看到一个例子：

//判断当前选项卡能否在视图（焦点）中：document.hiddenconst isBrowserTabInView = () => document.hidden;isBrowserTabInView();// Result: returns true or false depending on if tab is in view / focus

document.hidden？还有这种属性？赶紧补课 。

document.hidden

继续看下面的例子，还有visibilitychange 可监听事件，这个事件里可以获取document.hidden和document.visibilityState的值。

document.visibilityState

• 文档处于背景标签页状态
• 窗口处于最小化状态
• 操作系统处于“锁屏状态”（windows锁屏也可）
• 页面将要卸载状态：包括tab页切换、客户或者系统关闭tab页或者浏览器窗口。也就是说，页面卸载之前，document.visibilityState属性肯定会变成hidden

document.hidden和document.visibilityState的关系

当document.visibilityState属性返回visible时，document.hidden属性返回false；其余情况下，都返回true。

onvisibilitychange

可以这样来获取当前页面的状态：

   document.addEventListener("visibilitychange", function () {            // 客户离开了当前页面            if (document.visibilityState === "hidden") {                document.title = "页面不可见";            }            // 客户打开或者回到页面            if (document.visibilityState === "visible") {                document.title = "页面可见";            }        });

总结

• Page Visibility 相关的API有
  document.hidden，document.visibilityState和onvisibilitychange
• hidden的值取决于visibilityState
• 页面状态可通过visibilitychange获取hidden或者visibilityState的值

参考文章：
Page Visibility API 教程
Page Lifecycle API 教程