[[354656]]

這是一篇譯文

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

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

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

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

瀏覽器兼容性

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

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

bfcache基礎(chǔ)知識(shí)

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

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

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

開(kāi)啟了bfc時(shí)：加載上一個(gè)頁(yè)面基本上是即時(shí)的，因?yàn)檎麄€(gè)頁(yè)面可以從內(nèi)存中恢復(fù)，而不必訪問(wèn)網(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)頁(yè)的數(shù)據(jù)傳輸和加載時(shí)間!

cache是如何工作的

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

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

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

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

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

監(jiān)聽(tīng)bfcache的API

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

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

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

監(jiān)聽(tīng)頁(yè)面從bfc中恢復(fù)

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

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

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

監(jiān)聽(tīng)頁(yè)面進(jìn)入bfc

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

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

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

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

為bfcache優(yōu)化頁(yè)面

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

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

不要使用 unload 事件

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

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

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

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

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

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

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

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

僅僅有條件的添加 beforeunload 事件

beforeunload事件不會(huì)使您的頁(yè)面不符合Chrome或Safari的bfcache，但在Firefox中不行，因此除非絕對(duì)必要，否則請(qǐng)避免使用它。

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

下面的寫法是?的(無(wú)條件的監(jiān)聽(tīng)了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)頁(yè)面內(nèi)容未保存時(shí)，才監(jiān)聽(tīng)beforeunload事件 
onPageHasUnsavedChanges(() => { 
  window.addEventListener('beforeunload', beforeUnloadListener); 
}); 
 
// A function that invokes a callback when the page's unsaved changes are resolved. 
// 當(dāng)頁(yè)面內(nèi)容保存完畢時(shí)，移除beforeunload事件 
onAllChangesSaved(() => { 
  window.removeEventListener('beforeunload', beforeUnloadListener); 
}); 

避免window.opener的references

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

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

譯者注：安全問(wèn)題可以參考本公眾號(hào)的這篇文章 ：

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

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

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

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') 
  } 
});