1、介绍visibilityState
HTML5新提供的一个api，作用是记录当前标签页在浏览器中的激活状态。所谓“激活状态”指当前标签是否正在被用户浏览。
2、应用场景
监控用户行为，当用户的视角不在当前页面时，暂停加载广告，幻灯片、停止加载视频、开始加载小动画等。减少对用户宽带的占用，减少服务器压力，节省用户内存，以及到达更好的播放效果。
3、属性与事件
HTML5中专门为document元素添加了相关属性和事件：
属性：document.visibilityState
事件：document.addEventListener( "visibilitychange" , function(){})
4.注意事项
在目前，浏览器对 Page Visibility 的支持还是通过私有属性支持，因此在检测或利用 Page Visibility 提供的属性时需要加上浏览器私有前缀，例如在 Chrome 中检测上面的 visibilityState 属性时，就需要检测 document.webkitVisibilityState 而不是 document.visibilityState 。所以，需要首先检测浏览器类型，然后才使用 Page Visibility 的 API 。
5.实现代码
var vibibleState ='';
var visibleChange ='';
if (typeof document.visibilityState !='undefined') {
visibleChange ='visibilitychange';
vibibleState ='visibilityState';
}else if (typeof document.webkitVisibilityState !='undefined') {
visibleChange ='webkitvisibilitychange';
vibibleState ='webkitVisibilityState';
}
if (visibleChange) {
document.addEventListener(visibleChange, function() {
if (document[vibibleState] =='visible') {
alert('页面可见');
}
})
}
6.兼容版本
手机端开发基本分为ios和android端。
ios 7.1及以上都支持。6.1对应iPhone3.基本上不用考虑兼容问题，放心大胆的用。
android 端4.4及以上可以使用。android端低于4.4系统的手机市场量还是有一部分。使用这个属性时，基础功能引用了可能会引发问题。如果是优化功能的话，没有问题。
以下图片是该属性的兼容版本
