每個前端開發人員都應該知道的瀏覽器API
作為用戶，我們在瀏覽網頁時總喜歡一心多用，因此，打開多個瀏覽器標簽頁是很常見的，因為這有助于并行完成事情，但同時，每一個標簽頁都會消耗系統資源，比如記憶體和CPU，
由于不可能限制用戶打開新的瀏覽器標簽頁并將其留下，因此瀏覽器采取了一些措施，以在瀏覽器標簽頁不活動時重新分配資源，
現在的現代瀏覽器有時會在系統資源緊張的情況下暫停頁面或完全丟棄頁面–菲利普-沃爾頓，
那么你可能會有疑問，既然瀏覽器已經處理好了，我們為什么還要擔心這個問題呢？
并非完全如此，瀏覽器會照顧到一切，此外，這些瀏覽器的干預會直接影響到JavaScript的執行，好訊息是，幾乎所有的現代瀏覽器都通過頁面生命周期API將這些干預作為事件暴露出來，
頁面生命周期API
顧名思義，頁面生命周期API將網頁生命周期的鉤子暴露給JavaScript，然而，這并不是一個全新的概念，頁面可見性API存在了有一段時間，向JavaScript揭示了一些頁面可見性事件，
然而，如果你碰巧在這兩者之間做出選擇，值得一提的是Page Visibility API的一些限制，
- 它只提供網頁的可見和隱藏狀態，
- 它不能捕獲被作業系統丟棄的頁面（Android、IOS和最新的Windows系統可以終止后臺行程以保存系統資源），
我們來看看頁面生命周期API所暴露的頁面生命周期狀態，
頁面生命周期API狀態
在API中介紹了6種狀態，其中有兩種狀態與我們頗為相關，其中，有兩個狀態與我們相當相關，
FROZEN–CPU暫停的生命周期狀態（隱藏的網頁會被凍結以節約資源），
如果一個網頁被隱藏了很久，而用戶沒有關閉網頁，瀏覽器會將其凍結，并將網頁移動到這個狀態，但是，正在運行的任務會繼續進行，直到完成，但定時器、回呼函式執行和DOM操作將被停止以釋放CPU，
當我查看電腦上Chrome瀏覽器的資源消耗時，我觀察到兩個活動標簽頁分別消耗了14.7%和11%的CPU，而凍結的標簽頁消耗了近0%的CPU，
DISCARDED - 為了節省資源，將凍結狀態移動到Discarded狀態，
假設一個網頁長時間處于凍結狀態，在這種情況下，瀏覽器會自動將網頁卸載到丟棄狀態，以節省資源，在這種情況下，瀏覽器會自動將頁面卸載到丟棄狀態，釋放一些記憶體，而如果用戶再次訪問被丟棄的頁面，瀏覽器會重新加載頁面，回到活動狀態，
值得注意的是，用戶一般會在資源受限的設備中體驗到丟棄狀態，
除了以上兩種狀態外，API中還引入了其他四種狀態，分別是：
- ACTIVE - 頁面可見并有輸入焦點，
- PASSIVE - 頁面可見，但沒有輸入焦點，
- HIDDEN - 頁面不可見（也沒有凍結），
- TERMINATED - 頁面被卸載并從記憶體中清除，
你可以通過看下圖找到生命周期狀態和過渡的細節，
如何應對生命周期狀態？
現在我們已經了解了頁面生命周期API，讓我們看看如何回應每個事件，
這里最重要的是確定當應用程式達到每個狀態時，哪些需要保留，哪些需要停止，
- ACTIVE狀態–由于用戶在頁面上是完全活躍的，所以你的網頁應該完全回應用戶的輸入，任何UI阻塞任務都應該被去掉優先級，比如同步和阻塞網路請求，
- PASSIVE狀態–即使用戶在這個階段沒有與頁面進行互動，他們仍然可以看到它，因此你的網頁應該流暢地運行所有的UI更新和影片，
- HIDDEN狀態 - 隱藏狀態應該被視為用戶在網頁上的會話的結束，你可以在此時堅持未保存的應用狀態，并停止任何用戶不需要在后臺運行的UI更新或任務，
- Frozen狀態 - 任何可能影響其他標簽頁的定時器和連接都應該在這個階段終止，例如，你應該關閉所有打開的IndexedDB連接，任何打開的Web Socket連接，釋放任何被持有的Web鎖，等等，
- Terminated狀態 - 由于會話結束邏輯是在隱藏狀態下處理的，所以一般不需要任何操作，
- Discarded狀態 - 這個狀態是應用程式無法觀察到的，因此，任何可能的丟棄的準備作業都應該在隱藏或凍結狀態下進行，然而，你可以在頁面加載時通過檢查document.wasDiscarded來對頁面的任何恢復做出反應，
好了，現在我們知道在每個狀態下要做什么了，讓我們看看如何在我們的應用程式中捕獲每個狀態，
如何在代碼中捕獲生命周期狀態？
你可以使用下面的JavaScript函式來確定一個給定頁面的主動、被動和隱藏狀態，
const getState =()=>{
if (document.visibilityState ==='hidden'){
return 'hidden';
}if(document.hasFocus()){
return 'active';
}
return'passive';
};
隨著Chrome 68的發布，開發者可以通過監聽檔案物件上的凍結和恢復事件來觀察隱藏標簽何時被凍結和解凍，
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屬性可以在頁面加載時觀察，
瀏覽器兼容性
一些舊的瀏覽器不具備檢測其網頁何時被凍結或丟棄的能力，不過，隨著Chrome 68的發布，也加入了預測網頁下一步狀態的能力，
已知的兼容性問題
一些瀏覽器在切換標簽頁時沒有觸發模糊事件，這樣可以避免頁面進入被動狀態，
老版本的IE（10及以下）沒有實作visibilityChange事件，
Safari在關閉標簽頁時沒有可靠地觸發pagehide或visibilitychange事件，
為了克服跨瀏覽器的不兼容性，Google開發了一個名為Pagelifecycle.js的庫，作為以下瀏覽器的多維填充，
總結
當用戶沒有積極參與時，網頁不應該消耗過多的資源，此外，你的應用程式還應該知道系統執行的管理任務，Page Lifecycle API介紹了一種簡單的方法來讓你的應用程式知道這些事件，
雖然它更多地與高級用例相關，但我們可以通過了解它的功能來開發高效的網路應用，因此，我們可以為終端用戶提供更好的體驗，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/230314.html
標籤：其他