HTMl5引入了非常特殊的API页面可见性。之所以特别，是因为这个API关注的是一个叫——浏览器标签的函数是否被激活，很少有人关注。这里必须说明的是，这个“激活”是指标签是否正在被用户浏览，或者是否是当前标签。

那么，这个API的目的是什么呢？通常很多传统页面在用户没有激活的情况下会继续工作。比如用户在浏览新闻门户时，他之前打开的NBA比赛页面会继续刷新得到最新结果，视频网站会继续占用带宽加载资源。因此，如果不必要的工作太多，就会浪费很多资源。因此，这些商品相当有用：

Web程序每隔一段时间就会自动更新页面信息，以确保用户获得及时的信息。但是，当用户浏览其他页面时，可以控制他们暂停更新。

播放在线视频时，视频网站会一直加载视频，直到视频加载完毕。然而，当用户浏览其他页面时，他们可以暂停加载视频资源以节省带宽。

网站首页有一个很大的幻灯片，用户浏览其他页面时可以暂停。

因此，通过页面可见性，我们至少可以实现以下一项或多项优势：

1.节省服务器资源。Ajax轮询经常被忽略。关闭此请求可以节省资源。

2.节省内存消耗。

3.节省带宽消耗。

因此，使用页面可见性对用户和服务器都有好处。

然后正式介绍这个API。页面可见性向浏览器的文档对象添加两个属性，隐藏和可见状态。如果当前标签被激活，document.hidden的值为false，否则为true。可见性状态有四个可能的值：

隐藏：当浏览器被最小化，标签被切换，计算机锁定屏幕时，可见状态被隐藏

可见：当浏览器顶层上下文的文档显示在至少一个屏幕上时，它返回可见；当浏览器窗口未最小化，但浏览器被其他应用程序阻止时，它也是可见的

Prerender:当文档加载到屏幕外或者不可见时，返回prerender，这是一个不必要的属性，浏览器可以有选择地支持。

已卸载：当文档即将被卸载时，它将返回已卸载，浏览器也可以选择性地支持该属性

此外，文档中还会添加一个visibilitychange事件，该事件在文档的可见性发生变化时触发。

好了，介绍完属性，放一个Demo(打开切换标签测试)。

该演示的作用是监控标签的可见性是否发生变化，并在标签的可见性发生变化时生成提示。

值得注意的是，目前浏览器通过私有属性支持页面可见性，因此在检测或利用页面可见性提供的属性时，需要添加浏览器私有前缀。比如在Chrome中检测上面的visibilityState属性时，需要检测document.webkitVisibilityState而不是document.visibilityState，所以在Demo中首先检测浏览器类型，然后使用页面可见性的API。主要代码如下：

JavaScript代码将内容复制到剪贴板

functionbrowerKernel(){

varresult

['webkit '，' moz '，' o '，' ms']。forEach(函数(前缀){

if(type of document[prefix ' Hided ']！='undefined'){

结果=前缀；

}

});

returnresult

}

functioninit(){

prefix=browerKernel()；

varshow tip=document . getelementbyid(' show tip ')；

document.addEventListener(前缀' visibilitychange '，functiononVisibilityChange(e){

vartip=null

If(文档[前缀'可见性状态']=='隐藏')提示='请保存页面/p '；

else if(document[prefix ' visibility state ']==' visible ')tip=' PgO to page/p '；

show tip . innerhtml=show tip . innerhtml tip；

});

}

window . onload=init()；

再再来看一个具体的例子，代码如下：

Java Script语言代码复制内容到剪贴板

！DOCTYPEHTML

超文本标记语言

头

scripttype='text/javascript '

timer=0；

functiononLoad(){

文件。addevent侦听器(“可见性更改”，状态已更改)；

文件。addevent侦听器(' webkitvisibilitychange '，StateChanged)；

文件。addevent侦听器(' ms可见性更改'，状态已更改)；

}

functionstateChanged(){

控制台。日志(文档。webkitvisibilitate)；

if(文档。隐藏| |文档。WebKitHided | |文档。MsHided){

//newtaborindowminimized

timer=newDate().getTime()；

}

else{

alert(' youreawayfor '(new date().getTime()-timer)/1000 '秒。)

}

}

/script

/head

bodyonLoad='onLoad()'

/body

/html

在上面的代码中，同样，在铬运行下，在负荷事件中，监听了相关的webkitvisibilitychange事件（这个在铬下),如果是IE 10，则是msvisibilitychange事件，然后在回调函数中，开始了计算用户在页面停留的时间，所以当你打开其他拉环页或者最小化后，再切换回原来这个页，则会爪哇岛描述语言弹出显示：你离开了页面多长时间。

要注意的是，在铬中，属性命名为webkitHidden，事件为webkitvisibilitychange事件，而在IE 10中，属性为msHidden和msVisibilityState .