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，無論實現的是這類逗逼交互仍是正兒八經的優化，都歡迎拿出來一塊兒討論。