深入了解頁面生命周期API
關(guān)于本文 譯者：@飄飄 作者：@Viduni Wickramarachchi 原文：https://blog.bitsrc.io/page-lifecycle-api-a-browser-api-every-frontend-developer-should-know-b1c74948bd74
前言
曾經(jīng)碰到過這么個場景，統(tǒng)計用戶在該游戲停留時間。文章由@飄飄翻譯。
每個前端開發(fā)人員都應(yīng)該知道的瀏覽器API
作為用戶，我們在瀏覽網(wǎng)頁時總喜歡一心多用。因此，打開多個瀏覽器標(biāo)簽頁是很常見的，因為這有助于并行完成事情。但同時，每一個標(biāo)簽頁都會消耗系統(tǒng)資源，比如內(nèi)存和CPU。
由于不可能限制用戶打開新的瀏覽器標(biāo)簽頁并將其留下，因此瀏覽器采取了一些措施，以在瀏覽器標(biāo)簽頁不活動時重新分配資源。
現(xiàn)在的現(xiàn)代瀏覽器有時會在系統(tǒng)資源緊張的情況下暫停頁面或完全丟棄頁面--菲利普-沃爾頓。
那么你可能會有疑問，既然瀏覽器已經(jīng)處理好了，我們?yōu)槭裁催€要擔(dān)心這個問題呢？
并非完全如此，瀏覽器會照顧到一切。此外，這些瀏覽器的干預(yù)會直接影響到JavaScript的執(zhí)行。好消息是，幾乎所有的現(xiàn)代瀏覽器都通過頁面生命周期API將這些干預(yù)作為事件暴露出來。
頁面生命周期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)與我們頗為相關(guān)。其中，有兩個狀態(tài)與我們相當(dāng)相關(guān)。
FROZEN--CPU暫停的生命周期狀態(tài)（隱藏的網(wǎng)頁會被凍結(jié)以節(jié)約資源）。
如果一個網(wǎng)頁被隱藏了很久，而用戶沒有關(guān)閉網(wǎng)頁，瀏覽器會將其凍結(jié)，并將網(wǎng)頁移動到這個狀態(tài)。但是，正在運行的任務(wù)會繼續(xù)進行，直到完成。但定時器、回調(diào)函數(shù)執(zhí)行和DOM操作將被停止以釋放CPU。
當(dāng)我查看電腦上Chrome瀏覽器的資源消耗時，我觀察到兩個活動標(biāo)簽頁分別消耗了14.7%和11%的CPU，而凍結(jié)的標(biāo)簽頁消耗了近0%的CPU。
DISCARDED - 為了節(jié)省資源，將凍結(jié)狀態(tài)移動到Discarded狀態(tài)。
假設(shè)一個網(wǎng)頁長時間處于凍結(jié)狀態(tài)，在這種情況下，瀏覽器會自動將網(wǎng)頁卸載到丟棄狀態(tài)，以節(jié)省資源。在這種情況下，瀏覽器會自動將頁面卸載到丟棄狀態(tài)，釋放一些內(nèi)存。而如果用戶再次訪問被丟棄的頁面，瀏覽器會重新加載頁面，回到活動狀態(tài)。
值得注意的是，用戶一般會在資源受限的設(shè)備中體驗到丟棄狀態(tài)。
除了以上兩種狀態(tài)外，API中還引入了其他四種狀態(tài)，分別是：。
ACTIVE - 頁面可見并有輸入焦點。
PASSIVE - 頁面可見，但沒有輸入焦點。
HIDDEN - 頁面不可見（也沒有凍結(jié)）。
TERMINATED - 頁面被卸載并從內(nèi)存中清除。
你可以通過看下圖找到生命周期狀態(tài)和過渡的細節(jié)。
如何應(yīng)對生命周期狀態(tài)？
現(xiàn)在我們已經(jīng)了解了頁面生命周期API，讓我們看看如何響應(yīng)每個事件。
這里最重要的是確定當(dāng)應(yīng)用程序達到每個狀態(tài)時，哪些需要保留，哪些需要停止。
ACTIVE狀態(tài)--由于用戶在頁面上是完全活躍的，所以你的網(wǎng)頁應(yīng)該完全響應(yīng)用戶的輸入。任何UI阻塞任務(wù)都應(yīng)該被去掉優(yōu)先級，比如同步和阻塞網(wǎng)絡(luò)請求。
PASSIVE狀態(tài)--即使用戶在這個階段沒有與頁面進行交互，他們?nèi)匀豢梢钥吹剿Ｒ虼四愕木W(wǎng)頁應(yīng)該流暢地運行所有的UI更新和動畫。
HIDDEN狀態(tài) - 隱藏狀態(tài)應(yīng)該被視為用戶在網(wǎng)頁上的會話的結(jié)束。你可以在此時堅持未保存的應(yīng)用狀態(tài)，并停止任何用戶不需要在后臺運行的UI更新或任務(wù)。
Frozen狀態(tài) - 任何可能影響其他標(biāo)簽頁的定時器和連接都應(yīng)該在這個階段終止。例如，你應(yīng)該關(guān)閉所有打開的IndexedDB連接，任何打開的Web Socket連接，釋放任何被持有的Web鎖，等等。
Terminated狀態(tài) - 由于會話結(jié)束邏輯是在隱藏狀態(tài)下處理的，所以一般不需要任何操作。
Discarded狀態(tài) - 這個狀態(tài)是應(yīng)用程序無法觀察到的。因此，任何可能的丟棄的準(zhǔn)備工作都應(yīng)該在隱藏或凍結(jié)狀態(tài)下進行。然而，你可以在頁面加載時通過檢查document.wasDiscarded來對頁面的任何恢復(fù)做出反應(yīng)。
好了，現(xiàn)在我們知道在每個狀態(tài)下要做什么了，讓我們看看如何在我們的應(yīng)用程序中捕獲每個狀態(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)聽文檔對象上的凍結(jié)和恢復(fù)事件來觀察隱藏標(biāo)簽何時被凍結(jié)和解凍。
document.addEventListener('freeze', (event) => {
// The page is now frozen.
});
document.addEventListener('resume', (event) => {
// The page has been unfrozen.
});
要確定一個頁面在隱藏標(biāo)簽頁中是否被丟棄，可以使用以下代碼。
if (document.wasDiscarded) {
// Page was previously discarded by the browser while in a hidden tab.
}
上面提到的wasDiscarded屬性可以在頁面加載時觀察。
瀏覽器兼容性
一些舊的瀏覽器不具備檢測其網(wǎng)頁何時被凍結(jié)或丟棄的能力。不過，隨著Chrome 68的發(fā)布，也加入了預(yù)測網(wǎng)頁下一步狀態(tài)的能力。
已知的兼容性問題
一些瀏覽器在切換標(biāo)簽頁時沒有觸發(fā)模糊事件，這樣可以避免頁面進入被動狀態(tài)。
老版本的IE（10及以下）沒有實現(xiàn)visibilityChange事件。
Safari在關(guān)閉標(biāo)簽頁時沒有可靠地觸發(fā)pagehide或visibilitychange事件。
為了克服跨瀏覽器的不兼容性，Google開發(fā)了一個名為Pagelifecycle.js的庫，作為以下瀏覽器的多維填充。
總結(jié)
當(dāng)用戶沒有積極參與時，網(wǎng)頁不應(yīng)該消耗過多的資源。此外，你的應(yīng)用程序還應(yīng)該知道系統(tǒng)執(zhí)行的管理任務(wù)。Page Lifecycle API介紹了一種簡單的方法來讓你的應(yīng)用程序知道這些事件。
雖然它更多地與高級用例相關(guān)，但我們可以通過了解它的功能來開發(fā)高效的網(wǎng)絡(luò)應(yīng)用。因此，我們可以為終端用戶提供更好的體驗。
??愛心三連擊 1.看到這里了就點個在看支持下吧，你的「點贊，在看」是我創(chuàng)作的動力。
2.關(guān)注公眾號
程序員成長指北，回復(fù)「1」加入高級前端交流群！「在這里有好多 前端?開發(fā)者，會討論?前端 Node 知識，互相學(xué)習(xí)」！3.也可添加微信【ikoala520】，一起成長。
“在看轉(zhuǎn)發(fā)”是最大的支持