简单的说，浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。
这个事件可以满足一些用户需求，比如标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询，还有停止一些诸如轮播等循环动画效果等等。这些可以节省服务器和本地的开销。
这个事件已经得到现代浏览器广泛的支持，不过一些老版本的浏览器需要加相应的前缀。
| Chrome (Webkit) | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|
| 13前缀webkit 33无需前缀 |
10前缀moz 18无需前缀 |
10前缀ms | 12.10 | 最新的测试已经支持 |
注：Opera 12.10浏览器在最小化时不触发visibilitychange事件,也不将hidden属性设置为true.
document的可见性属性
Page Visibility (Second Edition)中定义了2个只读的document属性：hidden和visibilityState。
其中document.hidden是一个布尔值，简单的表示标签页显示或者隐藏。而document.visibilityState属性更为详细，目前有四个可能的值：
visible: 页面内容至少部分可见。这意味着在实际情况中，该网页是一个非最小化窗口的可见标签页。hidden: 页面内容是对用户不可见。实际上，这意味着该文档是后台标签页或最小化窗口的一部分，或者系统锁屏是时的状态。prerender: 网页内容被预渲染并且用户不可见。unloaded: 如果文档被卸载，那么这个值将被返回。
一般情况下我们使用document.hidden就能满足通常的需求。
document.addEventListevent('vibisilitychange',function(){
document.title = document.hidden ? '你快回来，我一个个人承受不来' ：'我在呢'
});