今天小编跟大家讲解下有关HTML5 visibilityState属性详细介绍和使用实例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5 visibilityState属性详细介绍和使用实例 的相关资料，希望小伙伴们看了有所帮助。
这里必须解释一下 这个“激活” 指的是这个标签是否正被用户浏览 或者说是否为当前标签。
那么 这个 API 究竟有些什么用途呢 通常 很多传统的页面在用户没有激活它的时候 它还会继续工作 例如 当用户正在浏览新闻门户 而他之前打开的 NBA 球赛页面会继续刷新获取最新结果 视频网站会继续占用带宽加载资源 于是 如果这类不必要的工作太多了 就会造成很多的资源浪费。因此 这货相当有用：
1.Web 程序每隔一段时间会自动更新页面信息 确保用户获取到及时的信息 但是 当用户正在浏览其他页面时 可以控制它暂停更新。 2.视频网站在播放在线视频时会不断加载视频 直到视频加载完毕 但是 当用户正在浏览其他页面时 可以暂停加载视频资源 节省带宽。 3.网站首页上有个大幻灯自动播放 当用户浏览其他页面了 就可以暂停播放。
于是 通过 Page Visibility 我们可以至少达到以下一种或几种的好处：
1.节省服务器资源 Ajax 轮询这类服务器资源占用常常会被忽略 关闭这种请求可以节省资源。 2.节省内存消耗。 3.节省带宽消耗。
因此 使用 Page Visibility 无论是对于用户还是服务器都有好处。
接下来正式介绍一下这个 API 。Page Visibility 会在浏览器的 document 对象上添加两个属性 hidden 和 visibilityState 。如果当前的标签被激活了 那么 document.hidden 的值为 false 否则为 true 。visibilityState 则有4个可能值：
1.hidden：当浏览器最小化、切换标签、电脑锁屏时 visibilityState 值是 hidden 2.visible：当浏览器最顶级上下文（context）的 document 至少显示在一个屏幕当中时 返回 visible；当浏览器窗口没有最小化 但是浏览器被其他应用遮挡时 这时也为 visible 3.prerender：当文档被加载到屏幕画面以外或者不可见时返回 prerender 这个是非必要属性 浏览器可选择性的支持。 4.unloaded：当文档将要被离开 ( unload ） 时返回 unloaded 浏览器也可选择性的支持这个属性
另外 document 上会添加 visibilitychange 事件 当 document 的可见性改变时触发该事件。
好了 介绍完属性 放上一个使用实例（复制代码保存到一个HTML文件 打开后切换标签即可测试效果）。
复制代码代码如下: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"/> <title>测试 HTML5 Page Visibility API</title> </head> <body></p><p> <div id="showTip"></div> <script> function browerKernel(){ var result; ['webkit', 'moz', 'o', 'ms'].forEach(function(prefix){</p><p> 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(); </script> </body> </html>
这个实例的作用是监听标签的可见性是否改变 并且在标签可见性发生改变时产生提示。
值得注意的是 在目前 浏览器对于 Page Visibility 的支持还是通过私有属性支持 因此在检测或利用 Page Visibility 提供的属性时需要加上浏览器私有前缀 例如在 Chrome 中检测上面的 visibilityState 属性时 就需要检测 document.webkitVisibilityState 而不是 document.visibilityState 。所以 Demo 中会首先检测浏览器类型 然后才使用 Page Visibility 的 API 。
来源：爱蒂网
