页面可见性是什么？页面可见性api的作用是通过监听document的visibilitychange事件记录当前标签页在浏览器中的激活状态。所谓“激活状态”指当前标签是否正在被用户浏览。
简单的说，就是?浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。
用它有什么好处？我们可以利用这个api在特定的时候避免执行一些不必要的操作，页面不可见时，暂停播放流媒体文件、停止一些不必要的轮询，以减少客户端、服务端压力，对于节省资源和提高性能特别有用。
有哪些使用场景？1、当前页面不可见时，暂停播放视频或者音乐，当页面恢复可见，继续之前播放。
2、实时轮询的榜单页面，当页面不可见时，暂停轮询。
3、网页轮播图，只有在用户观看轮播时，才自动切换到下一张。
4、在客户端内，一个文章列表页，点击文章打开新的webview或者客户端页面浏览或评论，返回上一页时，列表中该文章数据更新。
5、点击支付跳转到新开页面，再返回这个页面时弹出支付状态相关提示弹窗。
浏览器兼容性既然这么有用，肯定要看一下兼容性，能否用在项目中，下图是截止2019年10月30日的兼容性图表，也可点击?can i use?网站查看兼容性。
移动端可以放心大胆地使用。
该api的属性和事件属性1、document.hidden
布尔值，表示标签页的显示或隐藏。
2、document.visibilitystate
相对详细一些，目前有四个可能的值：
visible：页面部分内容可见。意味着该标签页是一个非最小化的可见标签页，可能被别的页面覆盖了一部分。
hidden：页面内容对用户不可见。 在实际中，这意味着文档可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。
prerender：页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender，但绝不会从其它值转为该值。 注释：浏览器支持是可选的。
unloaded：页面正在从内存中卸载。 注释：浏览器支持是可选的。
注意：prerender和unloaded在chrome中测试不出来触发场景，个人猜测并没有支持这两个值。mdn网站只有中文版有介绍这两个属性值，英文版只有prerender，且不建议使用。点击进入mdn
事件visibilitychange：当浏览器可见性发生变化的时候，这个事件会被触发。
我们可以在document对象上注册一个监听visibilitychange事件，根据document.hidden或者document.visibilitystate属性做一些业务逻辑。
注意：visibilitychange是document的事件，路由之间的跳转，不会改变当前页面的可见性，页面之间的跳转更不会触发该事件。
示例场景客户端内嵌h5页面经常遇到的一个场景：h5页面有一个视频，正在播放时，点击页面其他按钮，进入客户端原生页面，或者打开一个新的webview，这时视频应该暂停播放，返回该页面时，视频继续播放。
这种情况实现方法不止一个，我们这里使用这次的主角visibilitychange来实现。
1、先封装一下visibilitychange事件
tools.js代码：
varvar?handleshow,?handlehide,handleremove,?state_name;/**?*?监听visibilitychange?*?@param{object}?options?可见与不可见的回调函数?**/export?function?onbrowserchange(options)?{handleshow?=?options.handleshow,handlehide?=?options.handlehide;if?(document.visibilitystate?||?document.webkitvisibilitystate)?{var?prefix?=?document.visibilitystate?&&?''?||?document.webkitvisibilitystate?&&?'webkit'?||?'';var?event_name?=?prefix?+?'visibilitychange';state_name?=?prefixprefix?+?'visibilitystate'?:?'visibilitystate';document.addeventlistener(event_name,?browserchangeevent);}}/**?*?具体的事件处理函数*?removeeventlistener()不能移除匿名函数，我们把函数单独提出来?*?@param无?**/function?browserchangeevent()?{var?state?=?document[state_name];if?(state?===?'visible'?&&?typeof?handleshow?===?'function')?{handleshow();}?else?if?(state?===?'hidden'?&&?typeof?handlehide?===?'function')?{handlehide();}}/**?*?移除监听visibilitychange事件?*?@param{object}?options?移除前的回调函数?**/export?function?removebrowserchange(options)?{handleremove?=?options.handleremove;if?(document.visibilitystate?||?document.webkitvisibilitystate)?{var?prefix?=?document.visibilitystate?&&?''?||?document.webkitvisibilitystate?&&?'webkit'?||?'';var?event_name?=?prefix?+?'visibilitychange';state_name?=?prefixprefix?+?'visibilitystate'?:?'visibilitystate';if?(document[state_name]?===?'visible'?&&?typeof?handleremove?===?'function')?{handleremove();}document.removeeventlistener(event_name,?browserchangeevent,?false);handleshow?=?null;handlehide?=?null;handleremove?=null;}}<