Page Visibility(页面可见性) API介绍

一、网页君的悲情谁来懂
唉，突然想到了一首悲情诗：

泪湿罗巾梦不成，夜深前殿按歌声。
红颜未老恩先断， 斜倚薰笼坐到明。

学生时代学过的一首诗，已还给老师不知所云的诸位可参见下面释义：

诗的主人公是一位不幸的宫女。她一心盼望君王的临幸而终未盼得，时已深夜，只好上床，已是一层怨怅。宠幸不可得，退而求之好梦；辗转反侧，竟连梦也难成，见出两层怨怅。梦既不成，索性揽衣推枕，挣扎坐起。正当她愁苦难忍，泪湿罗巾之时，前殿又传来阵阵笙歌，原来君王正在那边寻欢作乐，这就有了三层怨怅。倘使人老珠黄，犹可解说；偏偏她盛鬓堆鸦，红颜未老，生出四层怨怅。要是君王一直没有发现她，那也罢了；事实是她曾受过君王的恩宠，而现在这种恩宠却无端断绝，见出五层怨怅。夜已深沉，濒于绝望，但一转念，犹翼君王在听歌赏舞之后，会记起她来。于是，斜倚熏笼，浓熏翠袖，以待召幸。不料，一直坐到天明，幻想终归破灭，见出六层怨怅。

为何在这阳光和煦，安静惬意的温暖冬日会有如此感伤呢？

唉，只因自己想到了可怜的网页君，其命运就跟深宫的宫女一般，令人唏嘘。

某君王啪啪啪啪打开了十几二十个选项卡（就像他当初啪啪啪啪宠幸后宫那十几二十个宫女一样）；但是，鞭长莫及，其一次只能浏览一个选项卡（就像他每晚只能宠幸一个宫女一样）；可是，其他的选项卡并不知道君王何时会再过来（就像其他的宫女并不清楚君王今晚会不会来宠幸一样）；于是，其他选项卡依然在不停地运行，守候（就像宫女依然留有希望，等待召幸）；然而，最后，君王直接啪一下浏览器关掉了，N多不停忠心守候的选项卡被无情漠视了（就像宫女们苦守整夜，结果却是一场空，只能以泪洗面）！

此番悲情怎能不让人同情怜悯，是不是啊，诸位！

哼，请不要摆出这样或这样的表情。
那个谁谁，说的就是你！你应该这样子或这样子。

您应该像扎西拉姆·多多一样，为悲情网页君赋诗一首——《见与不见》：

你见，或者不见我
我就在那里
不悲不喜
你念，或者不念我
情就在那里
不来不去……

时代在发展，制度也会进步。比方说明代吧，每日天渐黑时，嫔妃所住的宫门前，都挂起两只红纱笼灯。皇帝临幸某宫，则该宫门上的灯卸下来，表示皇帝已选定寝宿的地方。于是，负责巡街的宦官，传令其他各宫均卸灯寝息。失意的嫔妃们只得灭掉希求宠幸的红纱笼，明晚再重新挂上。

这就避免了嫔妃们彻夜苦等，哀怨泪雨的情形。

那网页君这边呢？

好在，就最近几年，网页君也有了相应的东西，可以告知网页你是“宠幸”了呢还是不被“宠幸”，这样，可以让网页君在不被“宠幸”时候安心睡觉，或者养个小白。这个东西就是Page Visibility API，翻译成简体中文就是“页面可见性应用程序接口”。

于是乎，网页君的悲情程度可以lower一点了，从这点来说，Page Visibility API是个很人性化的设计，感动！

为接地气，下”Page Visibility API”均称呼为“页面可见性API”。

二、页面可见性API究竟为何物？
CSS中有个有用且有趣且个人比较喜欢的属性 – visibility. 其有两个常用属性值：hidden与visible. 分别表示不可见与可见。OK，本文所说的API中也有Visibility这个单词，那他们表意一致？

回答是：YES! //众人：妹啊，你以为是中国达人秀啊！

页面可见性API就是表示网页可见还是不可见的，巧的是，hidden与visible就是该API的两个状态值。

举个通俗的例子：

如果你在xxxxx.com上浏览提神的图片，则当前你所看的这个网页的visibility就是visible.

此时，如果你老妈子突然进来给你送香蕉，出现下图所示场景：

则，此时之前提神的网页的visibility就是hidden – 最小化。

或者老妈子进来的时候，切换到人民网，提神网页的visibility也是hidden – 切换选项卡。

三、页面可见性API属性和事件
目前页面可见性API有两个属性，一个事件，如下：

1. document.hidden: Boolean值，表示当前页面可见还是不可见

2. document.visibilityState: 返回当前页面的可见状态,包括： document.visibilityState: 返回当前页面的可见状态,包括：
   “hidden“
   “visible“
   “prerender” 页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender，但绝不会从其它值转为该值。 注释：浏览器支持是可选的。
   “unloaded ” 页面正在从内存中卸载。 注释：浏览器支持是可选的。：

3. visibilitychange: 当可见状态改变时候触发的事件。