一、API 簡介

Page Visibility API 用來檢測頁面當前是否可見，以及開啟網頁的時間等

以前監聽使用者正在離開頁面常用的方法是下面三個事件：

1、pagehide
2、beforeunload
3、unload

但這些事件在手機上不觸發，因為手機系統可以將程序直接轉入後臺，然後殺死，為了解決這個問題，就誕生了 Page Visibility API
不管手機或桌面電腦，所有情況下，這個 API 都會監聽到頁面的可見性發生變化
這個 API 常用於頁面被切換到其他後臺程序時，自動暫停音樂或視訊的播放，達到節省資源，減緩電能消耗等效果

二、document.visibilityState

這個 API 主要在 document 物件上，新增了一個 document.visibilityState 屬性，該屬性返回一個字串，表示頁面當前的可見性狀態，共有三個可能的值：

1、hidden：頁面徹底不可見
2、visible：頁面至少一部分可見
3、prerender：頁面即將或正在渲染，處於不可見狀態

關於 hidden & visible，

hidden 狀態和 visible 狀態是所有瀏覽器都支援的
只要頁面可見，哪怕只露出一個角，document.visibilityState 屬性就返回 visible，只有以下四種情況，才會返回 hidden：

1、瀏覽器最小化
2、瀏覽器沒有最小化，但是當前頁面切換成了背景頁
3、瀏覽器將要解除安裝（unload）頁面
4、作業系統觸發鎖屏螢幕

關於 prerender，

prerender 狀態只在支援"預渲染"的瀏覽器上才會出現，比如 Chrome，可以在使用者不可見的狀態下，預先把頁面渲染出來，等到使用者要瀏覽的時候，直接展示渲染好的網頁

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

三、visibilitychange 事件

只要 document.visibilityState 屬性發生變化，就會觸發 visibilitychange 事件
因此，可以通過監聽這個事件跟蹤頁面可見性的變化，舉個例子：

document.addEventListener('visibilitychange', function () {
  // 使用者離開了當前頁面
  if (document.visibilityState === 'hidden') {
    document.title = '頁面不可見';
  }

  // 使用者開啟或回到頁面
  if (document.visibilityState === 'visible') {
    document.title = '頁面可見';
  }
});
 

上面程式碼是 Page Visibility API 的最基本用法，可以監聽可見性變化
下面是另一個例子，一旦頁面不可見，就暫停視訊播放:

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();
  }
}