簡單的說，瀏覽器標簽頁被隱藏或顯示的時候會觸發visibilitychange事件。
這個事件可以滿足一些用戶需求，比如標簽頁隱藏的時候停止播放音樂視頻、停止一些不必要的輪詢，還有停止一些諸如輪播等循環動畫效果等等。這些可以節省服務器和本地的開銷。
這個事件已經得到現代瀏覽器廣泛的支持，不過一些老版本的瀏覽器需要加相應的前綴。
| Chrome (Webkit) | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|
| 13前綴webkit 33無需前綴 |
10前綴moz 18無需前綴 |
10前綴ms | 12.10 | 最新的測試已經支持 |
注：Opera 12.10瀏覽器在最小化時不觸發visibilitychange事件,也不將hidden屬性設置為true.
document的可見性屬性
Page Visibility (Second Edition)中定義了2個只讀的document屬性：hidden和visibilityState。
其中document.hidden是一個布爾值，簡單的表示標簽頁顯示或者隱藏。而document.visibilityState屬性更為詳細，目前有四個可能的值：
visible: 頁面內容至少部分可見。這意味着在實際情況中，該網頁是一個非最小化窗口的可見標簽頁。hidden: 頁面內容是對用戶不可見。實際上，這意味着該文檔是后台標簽頁或最小化窗口的一部分，或者系統鎖屏是時的狀態。prerender: 網頁內容被預渲染並且用戶不可見。unloaded: 如果文檔被卸載，那么這個值將被返回。
一般情況下我們使用document.hidden就能滿足通常的需求。
document.addEventListevent('vibisilitychange',function(){
document.title = document.hidden ? '你快回來，我一個個人承受不來' ：'我在呢'
});