【W(wǎng)eb技術】850- 深入了解頁面生命周期API

譯者：@飄飄?

作者：@Viduni Wickramarachchi?

原文：https://blog.bitsrc.io/page-lifecycle-api-a-browser-api-every-frontend-developer-should-know-b1c74948bd74

前言

曾經(jīng)碰到過這么個場景，統(tǒng)計用戶在該游戲停留時間。文章由@飄飄翻譯。

每個前端開發(fā)人員都應該知道的瀏覽器API

作為用戶，我們在瀏覽網(wǎng)頁時總喜歡一心多用。因此，打開多個瀏覽器標簽頁是很常見的，因為這有助于并行完成事情。但同時，每一個標簽頁都會消耗系統(tǒng)資源，比如內(nèi)存和CPU。

由于不可能限制用戶打開新的瀏覽器標簽頁并將其留下，因此瀏覽器采取了一些措施，以在瀏覽器標簽頁不活動時重新分配資源。

現(xiàn)在的現(xiàn)代瀏覽器有時會在系統(tǒng)資源緊張的情況下暫停頁面或完全丟棄頁面--菲利普-沃爾頓。

那么你可能會有疑問，既然瀏覽器已經(jīng)處理好了，我們?yōu)槭裁催€要擔心這個問題呢？

并非完全如此，瀏覽器會照顧到一切。此外，這些瀏覽器的干預會直接影響到JavaScript的執(zhí)行。好消息是，幾乎所有的現(xiàn)代瀏覽器都通過頁面生命周期API將這些干預作為事件暴露出來。

頁面生命周期API

顧名思義，頁面生命周期API將網(wǎng)頁生命周期的鉤子暴露給JavaScript。然而，這并不是一個全新的概念。頁面可見性API存在了有一段時間，向JavaScript揭示了一些頁面可見性事件。

然而，如果你碰巧在這兩者之間做出選擇，值得一提的是Page Visibility API的一些限制。

• 它只提供網(wǎng)頁的可見和隱藏狀態(tài)。

• 它不能捕獲被操作系統(tǒng)丟棄的頁面（Android、IOS和最新的Windows系統(tǒng)可以終止后臺進程以保存系統(tǒng)資源）。

我們來看看頁面生命周期API所暴露的頁面生命周期狀態(tài)。

頁面生命周期API狀態(tài)

在API中介紹了6種狀態(tài)，其中有兩種狀態(tài)與我們頗為相關。其中，有兩個狀態(tài)與我們相當相關。

FROZEN--CPU暫停的生命周期狀態(tài)（隱藏的網(wǎng)頁會被凍結以節(jié)約資源）。

如果一個網(wǎng)頁被隱藏了很久，而用戶沒有關閉網(wǎng)頁，瀏覽器會將其凍結，并將網(wǎng)頁移動到這個狀態(tài)。但是，正在運行的任務會繼續(xù)進行，直到完成。但定時器、回調(diào)函數(shù)執(zhí)行和DOM操作將被停止以釋放CPU。

當我查看電腦上Chrome瀏覽器的資源消耗時，我觀察到兩個活動標簽頁分別消耗了14.7%和11%的CPU，而凍結的標簽頁消耗了近0%的CPU。

DISCARDED - 為了節(jié)省資源，將凍結狀態(tài)移動到Discarded狀態(tài)。

假設一個網(wǎng)頁長時間處于凍結狀態(tài)，在這種情況下，瀏覽器會自動將網(wǎng)頁卸載到丟棄狀態(tài)，以節(jié)省資源。在這種情況下，瀏覽器會自動將頁面卸載到丟棄狀態(tài)，釋放一些內(nèi)存。而如果用戶再次訪問被丟棄的頁面，瀏覽器會重新加載頁面，回到活動狀態(tài)。

值得注意的是，用戶一般會在資源受限的設備中體驗到丟棄狀態(tài)。

除了以上兩種狀態(tài)外，API中還引入了其他四種狀態(tài)，分別是：。

• ACTIVE - 頁面可見并有輸入焦點。

• PASSIVE - 頁面可見，但沒有輸入焦點。

• HIDDEN - 頁面不可見（也沒有凍結）。

• TERMINATED - 頁面被卸載并從內(nèi)存中清除。

你可以通過看下圖找到生命周期狀態(tài)和過渡的細節(jié)。

如何應對生命周期狀態(tài)？

現(xiàn)在我們已經(jīng)了解了頁面生命周期API，讓我們看看如何響應每個事件。

這里最重要的是確定當應用程序達到每個狀態(tài)時，哪些需要保留，哪些需要停止。

• ACTIVE狀態(tài)--由于用戶在頁面上是完全活躍的，所以你的網(wǎng)頁應該完全響應用戶的輸入。任何UI阻塞任務都應該被去掉優(yōu)先級，比如同步和阻塞網(wǎng)絡請求。

• PASSIVE狀態(tài)--即使用戶在這個階段沒有與頁面進行交互，他們?nèi)匀豢梢钥吹剿?。因此你的網(wǎng)頁應該流暢地運行所有的UI更新和動畫。

• HIDDEN狀態(tài) - 隱藏狀態(tài)應該被視為用戶在網(wǎng)頁上的會話的結束。你可以在此時堅持未保存的應用狀態(tài)，并停止任何用戶不需要在后臺運行的UI更新或任務。

• Frozen狀態(tài) - 任何可能影響其他標簽頁的定時器和連接都應該在這個階段終止。例如，你應該關閉所有打開的IndexedDB連接，任何打開的Web Socket連接，釋放任何被持有的Web鎖，等等。

• Terminated狀態(tài) - 由于會話結束邏輯是在隱藏狀態(tài)下處理的，所以一般不需要任何操作。

• Discarded狀態(tài) - 這個狀態(tài)是應用程序無法觀察到的。因此，任何可能的丟棄的準備工作都應該在隱藏或凍結狀態(tài)下進行。然而，你可以在頁面加載時通過檢查document.wasDiscarded來對頁面的任何恢復做出反應。

好了，現(xiàn)在我們知道在每個狀態(tài)下要做什么了，讓我們看看如何在我們的應用程序中捕獲每個狀態(tài)。

如何在代碼中捕獲生命周期狀態(tài)？

你可以使用下面的JavaScript函數(shù)來確定一個給定頁面的主動、被動和隱藏狀態(tài)。

const getState = () => {
  if (document.visibilityState === 'hidden') {
    return 'hidden';
  }
  if (document.hasFocus()) {
    return 'active';
  }
  return 'passive';
};

隨著Chrome 68的發(fā)布，開發(fā)者可以通過監(jiān)聽文檔對象上的凍結和恢復事件來觀察隱藏標簽何時被凍結和解凍。

document.addEventListener('freeze', (event) => {
  // The page is now frozen.
});

document.addEventListener('resume', (event) => {
  // The page has been unfrozen.
});

要確定一個頁面在隱藏標簽頁中是否被丟棄，可以使用以下代碼。

if (document.wasDiscarded) {
// Page was previously discarded by the browser while in a hidden tab.
} 

上面提到的wasDiscarded屬性可以在頁面加載時觀察。

瀏覽器兼容性

一些舊的瀏覽器不具備檢測其網(wǎng)頁何時被凍結或丟棄的能力。不過，隨著Chrome 68的發(fā)布，也加入了預測網(wǎng)頁下一步狀態(tài)的能力。

已知的兼容性問題

一些瀏覽器在切換標簽頁時沒有觸發(fā)模糊事件，這樣可以避免頁面進入被動狀態(tài)。

老版本的IE（10及以下）沒有實現(xiàn)visibilityChange事件。

Safari在關閉標簽頁時沒有可靠地觸發(fā)pagehide或visibilitychange事件。

為了克服跨瀏覽器的不兼容性，Google開發(fā)了一個名為Pagelifecycle.js的庫，作為以下瀏覽器的多維填充。

總結

當用戶沒有積極參與時，網(wǎng)頁不應該消耗過多的資源。此外，你的應用程序還應該知道系統(tǒng)執(zhí)行的管理任務。Page Lifecycle API介紹了一種簡單的方法來讓你的應用程序知道這些事件。

雖然它更多地與高級用例相關，但我們可以通過了解它的功能來開發(fā)高效的網(wǎng)絡應用。因此，我們可以為終端用戶提供更好的體驗。

1. JavaScript 重溫系列（22篇全）
2. ECMAScript 重溫系列（10篇全）
3. JavaScript設計模式 重溫系列（9篇全）
4.?正則 / 框架 / 算法等 重溫系列（16篇全）
5.?Webpack4 入門（上）||?Webpack4 入門（下）
6.?MobX 入門（上）?||??MobX 入門（下）
7. 100+篇原創(chuàng)系列匯總
回復“加群”與大佬們一起交流學習~
點擊“閱讀原文”查看 100+ 篇原創(chuàng)文章