以下文章来源于魔术师卡颂 ，作者30秒君
魔术师卡颂
《React技术揭秘》作者，React Contributor
使用
Document.hidden
属性判断当前页面是否可见。
const isBrowserTabFocused = () => !document.hidden;
例子
// true
isBrowserTabFocused();
扩展阅读
Document.hidden
属性来自于浏览器
Page Visibility API
。
该
API
的设计目的是为了方便开发者监听页面的可见性的变化，包括如下组成部分：
Document.hidden
为一个只读布尔值，表示当前页面是否被可见。
document.visibilityState
为一个只读字符串，表示页面当前的可见性状态，共有三个可选值：
hidden：页面不可见visible：页面部分可见prerender：页面即将或正在渲染，处于不可见状态当满足如下条件之一，为
hidden
：
浏览器窗口最小化当前浏览器Tab未处于激活状态浏览器将要卸载（unload）页面移动端设备触发触发锁屏除此之外，页面露出任何部分都属于
visible
。
prerender
存在于支持
预渲染
的浏览器。可以在用户不可见的状态下，预先把页面渲染出来，等到用户要浏览的时候，直接展示渲染好的网页。
visibilitychange事件
当
document.visibilityState
属性发生变化会触发
visibilitychange
事件。
document.addEventListener('visibilitychange', function () {
if (document.visibilityState === 'hidden') {
console.log('当前页面不可见');
}
if (document.visibilityState === 'visible') {
console.log('当前页面可见');
}
});
