HTMl5 推出了一个很“特别”的 API Page Visibility ，之所以说它特别，是因为这个 API 关注的是一个很少人留意的功能 —— 浏览器标签( tab ) 是否被激活。这里必须解释一下，这个“激活”，指的是这个标签是否正被用户浏览，或者说是否为当前标签。
那么，这个 API 究竟有些什么用途呢？通常，很多传统的页面在用户没有激活它的时候，它还会继续工作，例如，当用户正在浏览新闻门户，而他之前打开的 NBA 球赛页面会继续刷新获取最新结果，视频网站会继续占用带宽加载资源，于是，如果这类不必要的工作太多了，就会造成很多的资源浪费。因此，这货相当有用：
- Web 程序每隔一段时间会自动更新页面信息，确保用户获取到及时的信息，但是，当用户正在浏览其他页面时，可以控制它暂停更新。
- 视频网站在播放在线视频时会不断加载视频，直到视频加载完毕，但是，当用户正在浏览其他页面时，可以暂停加载视频资源，节省带宽。
- 网站首页上有个大幻灯自动播放，当用户浏览其他页面了，就可以暂停播放。
于是，通过 Page Visibility ，我们可以至少达到以下一种或几种的好处：
- 节省服务器资源，Ajax 轮询这类服务器资源占用常常会被忽略，关闭这种请求可以节省资源。
- 节省内存消耗。
- 节省带宽消耗。
因此，使用 Page Visibility 无论是对于用户还是服务器都有好处。
接下来正式介绍一下这个 API 。Page Visibility 会在浏览器的 document 对象上添加两个属性 hidden 和 visibilityState 。如果当前的标签被激活了，那么 document.hidden 的值为 false ，否则为 true 。visibilityState 则有4个可能值：
- hidden：当浏览器最小化、切换标签、电脑锁屏时 visibilityState 值是 hidden
- visible：当浏览器最顶级上下文（context）的 document 至少显示在一个屏幕当中时，返回 visible；当浏览器窗口没有最小化，但是浏览器被其他应用遮挡时，这时也为 visible
- prerender：当文档被加载到屏幕画面以外或者不可见时返回 prerender，这个是非必要属性，浏览器可选择性的支持。
- unloaded：当文档将要被离开 ( unload ） 时返回 unloaded，浏览器也可选择性的支持这个属性
另外，document 上会添加 visibilitychange 事件，当 document 的可见性改变时触发该事件。
好了，介绍完属性，放上一个 Demo （打开后切换标签即可测试）。
这个 Demo 的作用是监听标签的可见性是否改变 ，并且在标签可见性发生改变时产生提示。
值得注意的是，在目前，浏览器对于 Page Visibility 的支持还是通过私有属性支持，因此在检测或利用 Page Visibility 提供的属性时需要加上浏览器私有前缀，例如在 Chrome 中检测上面的 visibilityState 属性时，就需要检测 document.webkitVisibilityState 而不是 document.visibilityState 。所以，Demo 中会首先检测浏览器类型，然后才使用 Page Visibility 的 API 。主要代码如下：
function browerKernel(){
var result;
['webkit', 'moz', 'o', 'ms'].forEach(function(prefix){
if( typeof document[ prefix + 'Hidden' ] != 'undefined' ){
result = prefix;
}
});
return result;
}
function init(){
prefix = browerKernel();
var showTip = document.getElementById('showTip');
document.addEventListener( prefix + 'visibilitychange', function onVisibilityChange(e){
var tip = null;
if( document[ prefix + 'VisibilityState' ] == 'hidden' ) tip = '<p>离开页面</p>';
else if( document[ prefix + 'VisibilityState' ] == 'visible' ) tip = '<p>进入页面</p>';
showTip.innerHTML = showTip.innerHTML + tip;
});
}
window.onload = init();
本文由 Kayo Lee 发表，本文链接：https://kayosite.com/html5-page-visibility.html
Pingback
评论列表
很有意思的一个API~
顺便问一下，博主jQuery Mobile系列文章还会继续更新不？
@SteelQ 关于那个系列文章，当初打算写的内容已经都写好了，所以暂时不会更新啦，谢谢你的支持！
这个 API 还是很实用的，比如可以停止视频播放什么的。
@一堵墙 视频的话 大部分时候 我都是特意开着加载的 停止一些轮询或者加载之类的 倒是挺好的
@SteelQ 其实视频那部分我也习惯开着让它加载，所以如果视频商做了上面的功能，还是弄个选项让用户选择是否开启比较好！
@Kayo ios特严格, 离开就暂停了
@牧风 所以IOS下看超清的时候，我基本都被迫下载客户端离线缓存然后才能看了！
@一堵墙 是的，现代浏览器对这个API的支持度已经不错了，用在实际项目中可以节省不少资源！
看来得认真学学js～～不然html5都玩不了～
@Kkstxforkamancerman 其实 HTML5 相关的 js 比较简单，了解一下就很快上手了，做点 HTML5 应用还是挺好玩的！
过来求禁止日文评论的代码来了。该死的发帖机一直发日文。怎么都屏蔽不了。
三天400多条垃圾。
@野蛮人 这个还真没有，我一直用 akismet ，日文的 spam 评论也可以拦截啊！
@Kayo 拦截不了啊~我也有用~
@野蛮人 你可以在 akismet 内手动批量把一堆日文评论设置为垃圾评论，这样 akismet 下次就会拦截了！
@Kayo 是会拦截的。拦截后就到垃圾评论那里去了。其实我是想直接拒绝日文评论。
比较实用的一个API。。
@kn007 用途挺多的，只要运用的好可以增加不少好处！
@Kayo 是的
browerKernel() 函数这段判断us的方法感觉不太好, 不如直接判断是否支持该属性, msdn的写法是:
var hidden, visibilityChange;
if (typeof document.hidden !== “undefined”) { // Opera 12.10 and Firefox 18 and later support
hidden = “hidden”;
visibilityChange = “visibilitychange”;
} else if (typeof document.mozHidden !== “undefined”) {
hidden = “mozHidden”;
visibilityChange = “mozvisibilitychange”;
} else if (typeof document.msHidden !== “undefined”) {
hidden = “msHidden”;
visibilityChange = “msvisibilitychange”;
} else if (typeof document.webkitHidden !== “undefined”) {
hidden = “webkitHidden”;
visibilityChange = “webkitvisibilitychange”;
}
@牧风 嗯嗯，用 typeof 的确简洁很多，判断UA的话感觉是怪怪的，不过msdn的方法还是要用选择结构，有点长，昨天在做其他东东时想到了可以用数组的形式访问 document 的属性，这样只要直接遍历几个前缀，判断它们是否在浏览器中定义了就可以了。
待会更新代码！
@Kayo for break吧,节省几行代码
还在研究标准的html代码中。。。
没看文章直接戳Demo的后果就是——这Demo真崩了
似乎有很多站点都用得上这个
@Aivier 嗯嗯，这个很实用，用在应用类网站中能很方便的就提升了体验！