Page Visibility API及Page Lifecycle API的介紹及應用

摘要： 前言 今天主要介紹2個api，一個是Page Visibility API，一個是Page Lifecycle API，這兩個api你可能用的不多，關於Page Visibility API，目前大部分主流瀏覽器已經支援。 Page Visibility API主要是監聽網頁是否隱藏，...

前言

今天主要介紹2個api，一個是Page Visibility API，一個是Page Lifecycle API，這兩個api你可能用的不多，關於Page Visibility API，目前大部分主流瀏覽器已經支援。

Page Visibility API主要是監聽網頁是否隱藏，是否可見。Page Lifecycle API可以讓我們對整個網頁的生命週期有了更好的把控能力。

Page Visibility API

首先，我介紹一下Page Visibility API的應用場景

使用者對我們的h5頁面進行如下操作

1、使用者點選了一條系統通知，切換到另一個 App。
2、使用者進入任務切換視窗，切換到另一個 App。
3、使用者點選了 Home 按鈕，切換回主螢幕。
4、作業系統自動切換到另一個 App（比如，收到一個電話）

Page Visibility API 的意義在於，通過監聽網頁的可見性，對網頁中如下相關資訊進行暫停或者啟用：

1、網頁中音訊，和視訊，在網頁不可見是暫停，可見時繼續播放
2、網頁中的動畫，在網頁不可見是暫停，可見時繼續播放
3、對伺服器的輪詢等

使用

document.visibilityState

可以返回如下狀態

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

visibilitychange // 事件

只要document.visibilityState屬性發生變化，就會觸發visibilitychange事件。因此，可以通過監聽這個事件（通過document.addEventListener()方法或document.onvisibilitychange屬性），跟蹤頁面可見性的變化。

document.addEventListener('visibilitychange', function () {
// 使用者離開了當前頁面
if (document.visibilityState === 'hidden') {
console.log('haorooms測試-頁面不可見');
//進行你的程式碼邏輯操作
}

// 使用者開啟或回到頁面
if (document.visibilityState === 'visible') {
console.log('haorooms測試-頁面可見');
//進行你的程式碼邏輯操作
}
});

與今天介紹的這2個API相關的還有pagehide、ofollow,noindex" target="_blank">beforeunload 、unload等事件，這些事件我之前也介紹過，請分別點選檢視！

Page Lifecycle API

Android、iOS 和最新的 Windows 系統可以隨時自主地停止後臺程序，及時釋放系統資源。也就是說，網頁可能隨時被系統丟棄掉。Page Lifecycle API 可以監聽是否被系統掛起或者棄掉。

這個API可以分為如下幾個階段

（1）Active 階段

在 Active 階段，網頁處於可見狀態，且擁有輸入焦點。

對應focus 事件

focus事件在頁面獲得輸入焦點時觸發，比如網頁從 Passive 階段變為 Active 階段

（2）Passive 階段

在 Passive 階段，網頁可見，但沒有輸入焦點，無法接受輸入。UI 更新（比如動畫）仍然在執行。該階段只可能發生在桌面同時有多個視窗的情況。

對應blur事件在頁面失去輸入焦點時觸發，比如網頁從 Active 階段變為 Passive 階段。

（3）Hidden 階段

在 Hidden 階段，使用者的桌面被其他窗口占據，網頁不可見，但尚未凍結。UI 更新不再執行。

對應上面的visibilitychange 事件，可以通過網頁是否可見來判斷

（4）Terminated 階段

在 Terminated 階段，由於使用者主動關閉視窗，或者在同一個視窗前往其他頁面，導致當前頁面開始被瀏覽器解除安裝並從記憶體中清除。注意，這個階段總是在 Hidden 階段之後發生，也就是說，使用者主動離開當前頁面，總是先進入 Hidden 階段，再進入 Terminated 階段。

這個階段會導致網頁解除安裝，任何新任務都不會在這個階段啟動，並且如果執行時間太長，正在進行的任務可能會被終止。

beforeunload事件在視窗或文件即將解除安裝時觸發。該事件發生時，文件仍然可見，此時解除安裝仍可取消。經過這個事件，網頁進入 Terminated 狀態。

（5）Frozen 階段

如果網頁處於 Hidden 階段的時間過久，使用者又不關閉網頁，瀏覽器就有可能凍結網頁，使其進入 Frozen 階段。不過，也有可能，處於可見狀態的頁面長時間沒有操作，也會進入 Frozen 階段。

這個階段的特徵是，網頁不會再被分配 CPU 計算資源。定時器、回撥函式、網路請求、DOM 操作都不會執行，不過正在執行的任務會執行完。瀏覽器可能會允許 Frozen 階段的頁面，週期性復甦一小段時間，短暫變回 Hidden 狀態，允許一小部分任務執行。

這個階段可能有 freeze事件

可以通過document.onfreeze屬性指定在進入 Frozen 階段時呼叫的回撥函式。

function handleFreeze(e) {
// Handle transition to FROZEN
}
document.addEventListener('freeze', handleFreeze);

# 或者
document.onfreeze = function() { ... }

也可能有resume 事件

resume事件在網頁離開 Frozen 階段，變為 Active / Passive / Hidden 階段時觸發。

document.onresume屬性指的是頁面離開 Frozen 階段、進入可用狀態時呼叫的回撥函式。

function handleResume(e) {
// handle state transition FROZEN -> ACTIVE
}
document.addEventListener("resume", handleResume);

# 或者
document.onresume = function() { ... }

（6）Discarded 階段

如果網頁長時間處於 Frozen 階段，使用者又不喚醒頁面，那麼就會進入 Discarded 階段，即瀏覽器自動解除安裝網頁，清除該網頁的記憶體佔用。不過，Passive 階段的網頁如果長時間沒有互動，也可能直接進入 Discarded 階段。

如果某個選項卡處於 Frozen 階段，就隨時有可能被系統丟棄，進入 Discarded 階段。如果後來使用者再次點選該選項卡，瀏覽器會重新載入該頁面。

這時，可以通過判斷document.wasDiscarded屬性，瞭解先前的網頁是否被丟棄了

if (document.wasDiscarded) {
// 該網頁已經不是原來的狀態了，曾經被瀏覽器丟棄過
// 恢復以前的狀態
getPersistedState(self.discardedClientId);
}

注：目前 Page Lifecycle API 僅支援Chrome 68及以上版本 ，要相容低版本瀏覽器可以用PageLifecycle.js