document.hasFocus 与 document.visibilityState 的不同作用

document.hasFocus()

hasFocus() 方法返回布尔值，表明当前文档或者当前文档内的节点是否获得了焦点。

document.visibilityState

document（当前文档或页面） 的可见性状态：

• ‘visible’ : 此时页面内容至少是部分可见，即此页面在前景标签页中，并且窗口没有最小化.
• ‘hidden’ : 此时页面对用户不可见，即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 ‘锁屏状态’ .
• ‘prerender’ : 页面此时正在渲染中, 因此是不可见的 ;
• ‘unloaded’ : 页面从内存中卸载清除;

当此属性的值改变时, 会递交 visibilitychange 事件给Document。

应用场景：

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

比较与验证

一言以蔽之，focus 的页面一定是 visible 的，但 visible 的页面不一定是 focus 的!!!

setInterval(()=>console.log(`document.hasFocus() = ${document.hasFocus()}; document.visibilityState = ${document.visibilityState}`), 1000)