什麼是 Page Visibility ？ Page Visibility 即頁面可見性，通過 visibilityState 的值檢測頁面當前是否可見。當一個網站是可見或點擊選中的狀態時 Page Visibility API 可以讓你獲取到這種狀態，當用戶最小化網頁或者瀏覽到其他標簽的網頁時，A ...
什麼是 Page Visibility ？
Page Visibility 即頁面可見性，通過 visibilityState 的值檢測頁面當前是否可見。當一個網站是可見或點擊選中的狀態時 Page Visibility API 可以讓你獲取到這種狀態，當用戶最小化網頁或者瀏覽到其他標簽的網頁時，API將發送一個關於當前頁面的可見信息的事件vibilitychange。你可以檢測該事件然後執行一些活動或是展示不同的效果。這個API在節約資源上是非常有用的，當網頁不可見時，這個API通過提供給開發者可以操作不必須的任務的介面。比如，如果你的網站正在播放一個視頻，也許當用戶瀏覽其他瀏覽器時它可以暫停，那麼當用戶切換回來的時候，就可以繼續播放了。用戶可以繼續觀看，不會因為瀏覽其他的瀏覽器導致丟失當前視頻的進度。
頁面可見性（Page Visibility）API可以有哪些用途
- 網站有圖片輪播效果，只有在用戶觀看輪播的時候，才會自動展示下一顯示信息。
- 儀錶盤的應用程式不希望在頁面不可見時輪詢伺服器進行更新。
- 頁面想要檢測是否正在渲染，以便可以準確的計算網頁瀏覽量
- 當設備進入待機模式時，網站想要關閉設備聲音（用戶按下電源鍵關閉屏幕）
- 可應用於視頻站點，當用戶進入頁面播放，離開頁面暫停。
- 可應用於登錄同步
- 可用於計算線上時長。
- 線上聊天離開狀態。
- 還有一些切換效果，比方說，每次用戶切換到你這個頁面上的時候，logo抖一下，或頁面一道亮光閃過，或者其他效果
如何使用？
Page Visibility API的規範很簡單，只有兩個屬性：
document.hidden 根據瀏覽器視窗的狀態返回布爾值 true 或 false。
document.visibilityState存儲具體的狀態字元串。一共有四種狀態：
- visible : 頁面內容至少是部分可見，非最小化視窗的前景選項卡。
- hidden : 頁面內容對用戶不可見，可以是一個後臺標簽，或是最小化視窗的一部分，或是在操作系統鎖屏激活的狀態下。
- prerender : 頁面內容正在被預渲染且沒有對用戶是不可見的
- unloaded : 頁面正在從記憶體中卸載。
下麵寫一個計算線上時長的例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>0 : run</title> </head> <body> <h1>你在頁面停留的時間為 <span id="time">0</span> s</h1> <h1>這是你第 <span id="count">0</span> 次離開又回來了。</h1> <script> var i = 0, count = 0, si = setInterval(function () { document.querySelector('#time').innerHTML = ++i; document.title = i + ' : run'; }, 1000); document.addEventListener("visibilitychange", function () { if (document.hidden) { clearInterval(si); document.title = i + ' : pause'; } else { document.querySelector('#count').innerHTML = ++count; si = setInterval(function () { document.querySelector('#time').innerHTML = ++i; document.title = i + ' : run'; }, 1000); } }); </script> </body> </html>
上例代碼大意是：當頁面可見時，計時停留的時間，當頁面不可見時，計時器停止，頁面標題與之同步（切換標簽頁時註意標題）。再次返回頁面，繼續計時並且顯示當前離開又回來的次數。
本文只是個引子，簡單介紹基礎使用，更為複雜的應用和效果大家自行實現。
