[[354656]]

這是一篇譯文

原文標(biāo)題：Back/forward cache

原文鏈接：https://web.dev/bfcache/

后退/前進(jìn)緩存(Back/forward cache, 以下簡稱bfcache)是一種瀏覽器優(yōu)化，可實(shí)現(xiàn)即時(shí)的后退和前進(jìn)導(dǎo)航。它顯著改善了用戶的瀏覽體驗(yàn)，尤其是那些網(wǎng)絡(luò)或設(shè)備速度較慢的用戶。

作為web開發(fā)人員，了解如何在所有瀏覽器上基于bfcache優(yōu)化頁面非常重要。這樣可以提高用戶體驗(yàn)。

瀏覽器兼容性

Firefox和Safari都早已支持bfcache，包括桌面和移動設(shè)備。

從86版開始，Chrome已經(jīng)為一小部分用戶啟用了Android上的跨站點(diǎn)導(dǎo)航。在chrome87中，bfcache支持將推廣到所有Android用戶進(jìn)行跨站點(diǎn)導(dǎo)航，目的是在不久的將來也支持相同的站點(diǎn)導(dǎo)航。

bfcache基礎(chǔ)知識

bfcache是一個(gè)內(nèi)存中的緩存，它在用戶離開時(shí)存儲頁面的完整快照(包括JavaScript堆)。由于整個(gè)頁面都在內(nèi)存中，如果用戶決定返回，瀏覽器可以快速輕松地恢復(fù)頁面。

有多少次你訪問一個(gè)網(wǎng)站，點(diǎn)擊一個(gè)鏈接進(jìn)入另一個(gè)頁面，卻發(fā)現(xiàn)這不是你想要的，然后點(diǎn)擊后退按鈕?此時(shí)，bfcache對上一頁的加載速度會有很大的影響：

不支持bfc時(shí)：將啟動一個(gè)新的請求來加載上一個(gè)頁面，并且，根據(jù)該頁面針對重復(fù)訪問的優(yōu)化程度，瀏覽器可能需要重新下載、重新解析和重新執(zhí)行剛下載的部分(或全部)資源。

開啟了bfc時(shí)：加載上一個(gè)頁面基本上是即時(shí)的，因?yàn)檎麄€(gè)頁面可以從內(nèi)存中恢復(fù)，而不必訪問網(wǎng)絡(luò)。

bfcache不僅加快了導(dǎo)航速度，還減少了數(shù)據(jù)使用，因?yàn)椴槐卦俅蜗螺d資源。

Chrome的使用數(shù)據(jù)顯示，桌面上十分之一的導(dǎo)航和手機(jī)上五分之一的導(dǎo)航要么后退要么前進(jìn)。啟用bfcache后，瀏覽器可以消除每天數(shù)十億個(gè)網(wǎng)頁的數(shù)據(jù)傳輸和加載時(shí)間!

cache是如何工作的

bfcache使用的“緩存”不同于HTTP緩存(這在加速重復(fù)導(dǎo)航方面也很有用)。bfcache是內(nèi)存中整個(gè)頁面的快照(包括JavaScript堆)，而HTTP緩存只包含以前發(fā)出的請求的響應(yīng)。由于加載頁面所需的所有請求都能從HTTP緩存中得到滿足的情況非常罕見，因此使用bfcache恢復(fù)進(jìn)行的重復(fù)訪問總是比最優(yōu)化的非bfcache導(dǎo)航更快。

然而，在內(nèi)存中創(chuàng)建頁面快照是有一定復(fù)雜性的，特別是涉及到如何最好地保存正在進(jìn)行的代碼。例如，當(dāng)頁面在bfcache中時(shí)，如何處理到達(dá)超時(shí)的setTimeout()調(diào)用?

答案是，瀏覽器暫停運(yùn)行任何掛起的計(jì)時(shí)器或未resolved的Promise(實(shí)際上是JavaScript任務(wù)隊(duì)列中所有掛起的任務(wù))，并在頁面從bfcache恢復(fù)時(shí)(或如果)恢復(fù)處理任務(wù)。

在某些情況下，暫停任務(wù)是低風(fēng)險(xiǎn)的(例如，超時(shí)或Promise)，但在其他情況下，它可能會導(dǎo)致非常混亂或意外的行為。例如，如果瀏覽器暫停IndexedDB事務(wù)中所需的任務(wù)，它可能會影響同一源中打開的其他選項(xiàng)卡(因?yàn)槎鄠€(gè)選項(xiàng)卡可以同時(shí)訪問同一個(gè)IndexedDB數(shù)據(jù)庫)。因此，瀏覽器通常不會嘗試在IndexedDB事務(wù)中間緩存頁面，也不會使用可能影響其他頁面的api。

有關(guān)各種API用法如何影響頁面的bfcache的詳細(xì)信息，請參考下文的內(nèi)容。

監(jiān)聽bfcache的API

雖然bfcache是瀏覽器自動進(jìn)行的一種優(yōu)化，但對于開發(fā)人員來說，知道何時(shí)發(fā)生這種情況仍然很重要，這樣他們就可以針對bfcache優(yōu)化自己的頁面，并相應(yīng)地調(diào)整任何指標(biāo)或性能度量。

用于觀察bfcache的主要事件是頁面轉(zhuǎn)換事件pageshow和pagehide，這兩個(gè)事件存在的時(shí)間和bfcache存在的時(shí)間一樣長，并且在當(dāng)今使用的幾乎所有瀏覽器中都受支持。

新的頁面生命周期事件 freeze 和 resume 也會在頁面進(jìn)入或離開bfcache時(shí)以及在其他一些情況下觸發(fā)。例如，當(dāng)后臺選項(xiàng)卡凍結(jié)以最小化CPU使用率時(shí)。注意，頁面生命周期事件目前僅在基于Chromium的瀏覽器中受支持。

監(jiān)聽頁面從bfc中恢復(fù)

當(dāng)頁面最初加載時(shí)，pageshow事件在load事件之后立即激發(fā)。另外，頁面從bfcache還原時(shí)，pageshow也會觸發(fā)。pageshow事件有一個(gè)persisted屬性，如果從bfcache還原頁面，則該屬性為true;如果不是，則為false。您可以使用persisted屬性來區(qū)分常規(guī)頁面加載和bfcache還原。例如：

window.addEventListener('pageshow', function(event) { 
  if (event.persisted === true) { 
    // 頁面從bfc中恢復(fù) 
    console.log('This page was restored from the bfcache.'); 
  } else { 
    // 頁面正常加載 
    console.log('This page was loaded normally.'); 
  } 
}); 

在支持頁面生命周期API的瀏覽器中，當(dāng)頁面從bfcache還原時(shí)(就在pageshow事件之前)，resume事件也會觸發(fā)，不過當(dāng)用戶重新訪問凍結(jié)的背景選項(xiàng)卡時(shí)，它也會觸發(fā)。如果要在凍結(jié)頁面(包括bfcache中的頁面)后恢復(fù)頁面狀態(tài)，可以使用freeze事件，但如果要測量站點(diǎn)的bfcache命中率，則需要使用pageshow事件。在某些情況下，您可能需要同時(shí)使用這兩種方法。

監(jiān)聽頁面進(jìn)入bfc

pagehide事件是pageshow事件的對應(yīng)項(xiàng)。當(dāng)頁面正常加載或從bfcache還原時(shí)，將激發(fā)pageshow事件。pagehide事件在頁面正常卸載或?yàn)g覽器試圖將其放入bfcache時(shí)觸發(fā)。

pagehide事件還有一個(gè)persistent屬性，如果它是false，那么您可以確信頁面不會進(jìn)入bfcache。但是，如果persistent屬性為true，則不能保證將緩存頁。這意味著瀏覽器打算緩存頁面，但可能有一些因素導(dǎo)致無法緩存。

window.addEventListener('pagehide', function(event) { 
  if (event.persisted === true) { 
   // 頁面可能會進(jìn)入bfc緩存 
   console.log('This page *might* be entering the bfcache.'); 
  } else { 
    // 頁面會正常退出，并且會被丟棄 
    console.log('This page will unload normally and be discarded.'); 
  } 
}); 

類似地，freeze事件將在pagehide事件之后立即觸發(fā)(如果事件的persistent屬性為true)，但這同樣意味著瀏覽器打算緩存頁面。在下面描述的情況下，它可能仍然必須丟棄它。

為bfcache優(yōu)化頁面

并不是所有的頁面都存儲在bfcache中，即使頁面確實(shí)存儲在那里，它也不會無限期地停留在那里。開發(fā)人員必須了解是什么使頁面符合bfcache的條件(和不符合條件)，以最大限度地提高緩存命中率。

下面幾節(jié)概括了使瀏覽器盡可能緩存頁面的最佳實(shí)踐。

不要使用 unload 事件

在所有瀏覽器中優(yōu)化bfcache的最重要方法是永遠(yuǎn)不要使用unload事件。

unload事件對于瀏覽器來說是有問題的，因?yàn)樗缬赽fcache觸發(fā)，并且網(wǎng)絡(luò)上的許多頁面都是在一個(gè)(合理的)假設(shè)下運(yùn)行的：unload事件觸發(fā)后，頁面將不再存在了。這就帶來了一個(gè)挑戰(zhàn)，因?yàn)樵S多頁面的構(gòu)建都是基于這樣一個(gè)假設(shè)：unload事件將在用戶離開時(shí)觸發(fā)。然而，事實(shí)已經(jīng)不是這樣了(而且在很長一段時(shí)間內(nèi)都不是這樣)。

譯者注：這里我的理解是，瀏覽器在設(shè)計(jì)unload事件之初，就是在頁面不需要的時(shí)候觸發(fā)。如果開發(fā)者監(jiān)聽了unload事件，則表示頁面銷毀時(shí)需要執(zhí)行一些邏輯，這個(gè)時(shí)候，頁面自然是不需要再進(jìn)行緩存了。然而這種情況下，很多開發(fā)者是希望頁面被緩存的，這和unload事件本身的含義有沖突。

所以瀏覽器面臨著一個(gè)兩難的選擇，他們必須在能改善用戶體驗(yàn)的同時(shí)也可能有破壞頁面的風(fēng)險(xiǎn)。

Firefox選擇了如果添加unload偵聽器，那么頁面就不符合bfcache的條件，這樣做風(fēng)險(xiǎn)較小，但也會使很多頁面無法bfc。Safari會嘗試緩存一些監(jiān)聽了unload事件的頁面，但是為了減少潛在的破壞，當(dāng)用戶導(dǎo)航離開時(shí)，Safari不會觸發(fā)unload事件。

由于Chrome中65%的頁面都注冊了unload事件偵聽器，為了能夠緩存盡可能多的頁面，Chrome選擇與Safari保持一致。

不要使用unload事件，使用pagehide事件。pagehide事件在unload事件觸發(fā)的所有情況下都會觸發(fā)，并且在頁面放入bfcache時(shí)也會觸發(fā)。

注意，永遠(yuǎn)不要添加unload事件偵聽器!請改用pagehide事件。在Firefox中添加unload事件監(jiān)聽器會使你的站點(diǎn)變慢，而代碼在Chrome和Safari中大部分時(shí)間都不會運(yùn)行。

僅僅有條件的添加 beforeunload 事件

beforeunload事件不會使您的頁面不符合Chrome或Safari的bfcache，但在Firefox中不行，因此除非絕對必要，否則請避免使用它。

但是，與unload事件不同，beforeunload有合法的用法。例如，當(dāng)您要警告用戶他們有未保存的更改時(shí)，如果他們離開頁面，他們將丟失。在這種情況下，建議僅在用戶有未保存的更改時(shí)添加beforeunload偵聽器，然后在保存未保存的更改后立即將其刪除。

下面的寫法是?的(無條件的監(jiān)聽了beforeunload事件)：

window.addEventListener('beforeunload', (event) => { 
  if (pageHasUnsavedChanges()) { 
    event.preventDefault(); 
    return event.returnValue = 'Are you sure you want to exit?'; 
  } 
}); 

下面的寫法是?的：

function beforeUnloadListener(event) { 
  event.preventDefault(); 
  return event.returnValue = 'Are you sure you want to exit?'; 
}; 
 
// A function that invokes a callback when the page has unsaved changes. 
// 當(dāng)頁面內(nèi)容未保存時(shí)，才監(jiān)聽beforeunload事件 
onPageHasUnsavedChanges(() => { 
  window.addEventListener('beforeunload', beforeUnloadListener); 
}); 
 
// A function that invokes a callback when the page's unsaved changes are resolved. 
// 當(dāng)頁面內(nèi)容保存完畢時(shí)，移除beforeunload事件 
onAllChangesSaved(() => { 
  window.removeEventListener('beforeunload', beforeUnloadListener); 
}); 

避免window.opener的references

在一些瀏覽器中(包括chrome，從86版本起)，如果使用 window.open或者 target=_blank 打開一個(gè)新的頁面，但是沒有寫明：rel="noopener"，那么，新打開的頁面中，會包含一個(gè)對原有頁面的引用。

除了存在安全風(fēng)險(xiǎn)外，保留了對其他頁面引用的頁面不能安全地放入bfcache，因?yàn)檫@可能會破壞任何試圖訪問它的頁面。

譯者注：安全問題可以參考本公眾號的這篇文章 ：

使用標(biāo)簽時(shí)，你可能會忽略的一個(gè)安全問題

因此，最好使用 rel="noopener" 來保證打開的頁面無法引用之前的頁面。如果你的站點(diǎn)需要打開一個(gè)新頁面并通過window.postMessage()或直接引用之前的window對象來控制之前的窗口，則新打開的頁面和之前的頁面都不符合bfcache的條件。

總是在用戶導(dǎo)航離開之前關(guān)閉打開的連接

Cache-Control: no-store 

// Send a pageview when the page is first loaded. 
gtag('event', 'page_view') 
 
window.addEventListener('pageshow', function(event) { 
  if (event.persisted === true) { 
    // Send another pageview if the page is restored from bfcache. 
    gtag('event', 'page_view') 
  } 
});