visibilitychange：API详解

利用页面可见性API搞个怪

继各大站点、博客在用console发招聘、玩游戏、埋彩蛋以后（知乎相关连接），小剧彷佛又发现了一个好玩儿的东西，目测会火，利用页面可见性API作些小技俩。

页面可见性是什么

页面可见性API经过document的visibilitychange让脚本知道用户是否已经看不到这个页面了。能够在特定的时候暂缓一些没必要要的操做，以减小客户端、服务端压力。如一个实时刷新的列表可在页面不可见的时候暂停请求数据，页面恢复可见时再继续请求新数据。

我这里只是简单介绍，详细的能够参考Page Visibility API 。

看起来颇有用的样纸，目前实际应用呢？

显然，这一API如果合理的使用起来，会有不少意想不到的好处。可是做为一个相对来讲比较新的API，兼容性目前仍是须要等待浏览器的更新换代。目前也有部分站点用到此API来实现的小功能，固然也只是个逗逼玩意儿。

首先来介绍下剧中人写的的一个搞死程序员的小技俩。

页面处在可见状态的时候没有任何异常，可是当你把页面切换到其余TAB页，或者最小化到任务栏的时候浏览器title就会写上“出BUG了，快看！”，做为一个严肃的程序员，你是否想看看究竟是哪儿出BUG？答案是确定的，可是当你再次打开小剧的博客时却发现，一切无缺如初。可能到了这个时候你才会意识到：天杀的，居然被小剧骗了，呃，只不过你来打我啊！

具体到代码实现，其实简单到爆了，也只不过是这一个事件的监听而已。

document.addEventListener('visibilitychange', function() { document.title = document.hidden ? '出BUG了，快看！':'小剧客栈，剧中人的我的博客！' }); 

另外再提一个有相似猥琐功能的站点“饿了么”，下面是我从压缩后的代码中抠出来的和此功能相关的代码。

var r = "记得回来点单哦！ - 饿了么", n = document.title; angular.$(document).on("visibilitychange",function(){ document.title = "hidden"===document.visibilityState ? r : n }) 

固然，若是你也在用或者你发现了有其余站点也在用这个API，无论实现的是这类逗逼交互仍是正儿八经的优化，都欢迎拿出来一块儿讨论。