以前，頁面被系統(tǒng)切換，以及系統(tǒng)清除瀏覽器進程，是無法監(jiān)聽到的。開發(fā)者想要指定，任何一種頁面卸載情況下都會執(zhí)行的代碼，也是無法做到的。為了解決這個問題，就誕生了 Page Visibility API。不管手機或桌面電腦，所有情況下，這個 API 都會監(jiān)聽到頁面的可見性發(fā)生變化。

這個新的 API 的意義在于，通過監(jiān)聽網頁的可見性，可以預判網頁的卸載，還可以用來節(jié)省資源，減緩電能的消耗。比如，一旦用戶不看網頁，下面這些網頁行為都是可以暫停的。

對服務器的輪詢
網頁動畫
正在播放的音頻或視頻

二、document.visibilityState

這個 API 主要在document對象上，新增了一個document.visibilityState屬性。該屬性返回一個字符串，表示頁面當前的可見性狀態(tài)，共有三個可能的值。

hidden：頁面徹底不可見。

visible：頁面至少一部分可見。

prerender：頁面即將或正在渲染，處于不可見狀態(tài)。

其中，hidden狀態(tài)和visible狀態(tài)是所有瀏覽器都必須支持的。prerender狀態(tài)只在支持"預渲染"的瀏覽器上才會出現(xiàn)，比如 Chrome 瀏覽器就有預渲染功能，可以在用戶不可見的狀態(tài)下，預先把頁面渲染出來，等到用戶要瀏覽的時候，直接展示渲染好的網頁。

只要頁面可見，哪怕只露出一個角，document.visibilityState屬性就返回visible。只有以下四種情況，才會返回hidden。

瀏覽器最小化。
瀏覽器沒有最小化，但是當前頁面切換成了背景頁。
瀏覽器將要卸載（unload）頁面。
操作系統(tǒng)觸發(fā)鎖屏屏幕。

可以看到，上面四種場景涵蓋了頁面可能被卸載的所有情況。也就是說，頁面卸載之前，document.visibilityState屬性一定會變成hidden。

事實上，這也是設計這個 API 的主要目的。

另外，早期版本的 API，這個屬性還有第四個值unloaded，表示頁面即將卸載，現(xiàn)在已經被廢棄了。

注意，document.visibilityState屬性只針對頂層窗口，內嵌的<iframe>頁面的document.visibilityState屬性由頂層窗口決定。

使用 CSS 屬性隱藏<iframe>頁面（比如display: none;），并不會影響內嵌頁面的可見性。

三、document.hidden

由于歷史原因，這個 API 還定義了document.hidden屬性。該屬性只讀，返回一個布爾值，表示當前頁面是否可見。

當document.visibilityState屬性返回visible時，document.hidden屬性返回false；其他情況下，都返回true。

該屬性只是出于歷史原因而保留的，只要有可能，都應該使用document.visibilityState屬性，而不是使用這個屬性。

四、visibilitychange 事件

只要document.visibilityState屬性發(fā)生變化，就會觸發(fā)visibilitychange事件。

因此，可以通過監(jiān)聽這個事件（通過document.addEventListener()方法或document.onvisibilitychange屬性），跟蹤頁面可見性的變化。

document.addEventListener('visibilitychange', function () {
  // 用戶離開了當前頁面
  if (document.visibilityState === 'hidden') {
    document.title = '頁面不可見';
  }
  // 用戶打開或回到頁面
  if (document.visibilityState === 'visible') {
    document.title = '頁面可見';
  }
});

上面代碼是 Page Visibility API 的最基本用法，可以監(jiān)聽可見性變化。

下面是另一個例子，一旦頁面不可見，就暫停視頻播放。

var vidElem = document.getElementById('video-demo');
document.addEventListener('visibilitychange', startStopVideo);
function startStopVideo() {
  if (document.visibilityState === 'hidden') {
    vidElem.pause();
  } else if (document.visibilityState === 'visible') {
    vidElem.play();
  }
}

五、頁面卸載

下面專門討論一下，如何正確監(jiān)聽頁面卸載。

頁面卸載可以分成三種情況。

頁面可見時，用戶關閉 Tab 頁或瀏覽器窗口。
頁面可見時，用戶在當前窗口前往另一個頁面。
頁面不可見時，用戶或系統(tǒng)關閉瀏覽器窗口。

這三種情況，都會觸發(fā)visibilitychange事件。前兩種情況，該事件在用戶離開頁面時觸發(fā)；最后一種情況，該事件在頁面從可見狀態(tài)變?yōu)椴豢梢姞顟B(tài)時觸發(fā)。

由此可見，visibilitychange事件比pagehide、beforeunload、unload事件更可靠，所有情況下都會觸發(fā)（從visible變?yōu)?code>hidden）。因此，可以只監(jiān)聽這個事件，運行頁面卸載時需要運行的代碼，不用監(jiān)聽后面那三個事件。

甚至可以這樣說，unload事件在任何情況下都不必監(jiān)聽，beforeunload事件只有一種適用場景，就是用戶修改了表單，沒有提交就離開當前頁面。另一方面，指定了這兩個事件的監(jiān)聽函數(shù)，瀏覽器就不會緩存當前頁面。

參考鏈接