本文主要是介绍Page Visibility API（页面是否可见），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.什么是 Page Visibility ？
顾名思义这是一个页面可见性API。
简单的说，浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。
这是HTML5新提供的一个api，作用是记录当前标签页在浏览器中的激活状态。
所谓“激活状态”指当前标签是否正在被用户浏览。
我们知道，平时在PC端浏览网页的时候，使用的都是选项卡这种方式浏览网页，使用这种方式浏览，任何给定网页都有可能在后台，因此对用户不可见。页面可见性API提供了开发者可以观察的事件，以便了解文档何时可见或隐藏，以及查看页面当前可见性状态的功能。
页面可见性API对于节省资源和提到性能特别有用，它使页面在文档不可见时避免执行不必要的任务。
当用户最小化窗口或切换到另一个选项卡时，API会发送visibilitychange事件，让开发者知道页面状态已更改。你可以检测事件并执行某些操作或行为。例如，如果你的网络应用正在播放视频，则可以在用户将标签放入背景时暂停视频，并在用户返回标签时恢复播放。 用户不会在视频中丢失位置，视频的音轨不会干扰新前景选项卡中的音频，并且用户在此期间不会错过任何视频。这种体验是用户无感知的，并且对于用户体验是非常友好的。
因此规范的使用这个API可以减少对用户宽带的占用，减少服务器压力，节省用户内存，以及到达更好的播放效果。
2.页面可见性（Page Visibility）API可以有哪些用途
- 网站有图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一显示信息。
- 仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
- 页面想要检测是否正在渲染，以便可以准确的计算网页浏览量
- 当设备进入待机模式时，网站想要关闭设备声音（用户按下电源键关闭屏幕）
- 可应用于视频站点，当用户进入页面播放，离开页面暂停。
- 可应用于登录同步
- 可用于计算在线时长。
- 在线聊天离开状态。
- 还有一些切换效果，比方说，每次用户切换到你这个页面上的时候，logo抖一下，或页面一道亮光闪过，或者其他效果
3.如何使用？
Page Visibility API的规范很简单，只有两个属性：
document.hidden 表示页面是否隐藏;true表示隐藏,false表示没有隐藏。页面隐藏包括页面在后台标签页或者浏览器最小化
document.visibilityState存储具体的状态字符串。一共有四种状态：
- visible : 页面内容至少是部分可见，非最小化窗口的前景选项卡。
- hidden : 页面内容对用户不可见，可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。
- prerender : 页面内容正在被预渲染且没有对用户是不可见的
- unloaded : 页面正在从内存中卸载。
4.visibilitychange事件:当文档从可见变为不可见或者不可见变为可见时,触发该事件。
chrome需要加上webkit前缀,即document.webkitHidden,IE中需要加上ms前缀,即document.msHidden,在firefox中需要加上moz前缀,即document.mozHidden.
例子：bootstrap轮播图代码
// Page Visibility 即页面可见性，图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一显示信息 不加会有连续滑动的bugdocument.addEventListener('visibilitychange', function() {if(document.hidden) {$('.carousel').carousel('pause')} else {$('.carousel').carousel(); }})这篇关于Page Visibility API（页面是否可见）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
