緩存是所有工程師都必須知道的非常有用的軟件組件。它是一個(gè)橫向組件，適用于所有技術(shù)領(lǐng)域和架構(gòu)層，如操作系統(tǒng)、數(shù)據(jù)平臺(tái)、后端、前端和其他組件。在本文中，我們將描述什么是緩存，并針對(duì)前端和客戶端解釋具體用例。

什么是緩存？

緩存可以以基本方式定義為數(shù)據(jù)消費(fèi)者和數(shù)據(jù)生產(chǎn)者之間的中間存儲(chǔ)器，用于存儲(chǔ)和提供將被相同/不同消費(fèi)者多次訪問(wèn)的數(shù)據(jù)。除了提高性能外，它在用戶可用性方面對(duì)數(shù)據(jù)消費(fèi)者來(lái)說(shuō)是一個(gè)透明層。 通常，數(shù)據(jù)生產(chǎn)者提供的數(shù)據(jù)的可重用性是利用緩存優(yōu)勢(shì)的關(guān)鍵。性能是使用內(nèi)存數(shù)據(jù)庫(kù)等緩存系統(tǒng)來(lái)提供具有低延遲、高吞吐量和并發(fā)性的高性能解決方案的另一個(gè)原因。

例如，每天有多少人查詢天氣，他們會(huì)重復(fù)查詢多少次？假設(shè)紐約有 1,000 人查詢天氣，其中 50% 的人每天重復(fù)相同的查詢兩次。在這種情況下，如果我們可以將第一個(gè)查詢存儲(chǔ)在盡可能靠近用戶設(shè)備的位置，我們將獲得兩個(gè)好處：增加用戶體驗(yàn)，因?yàn)閿?shù)據(jù)提供得更快，并減少對(duì)數(shù)據(jù)生產(chǎn)者/服務(wù)器端的查詢次數(shù)。輸出是更好的用戶體驗(yàn)和支持更多并發(fā)用戶使用該平臺(tái)的解決方案。

天氣查詢場(chǎng)景

在高層次上，我們可以以互補(bǔ)的方式應(yīng)用兩種緩存策略：

Client/Consumer Side：緩存的數(shù)據(jù)存儲(chǔ)在消費(fèi)者或用戶端，當(dāng)我們談?wù)?Web 解決方案時(shí)，通常在瀏覽器的內(nèi)存中（也稱為私有緩存）。

服務(wù)器/生產(chǎn)者端：緩存的數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)生產(chǎn)者架構(gòu)的組件中。

客戶端和服務(wù)器端

與任何其他解決方案一樣，緩存具有一系列優(yōu)勢(shì)，我們將對(duì)其進(jìn)行總結(jié)：

• 應(yīng)用程序性能：提供更快的響應(yīng)時(shí)間，因?yàn)榭梢愿斓靥峁?shù)據(jù)。
• 減少服務(wù)器端的負(fù)載：當(dāng)我們將緩存應(yīng)用到以前的系統(tǒng)并重用一段數(shù)據(jù)時(shí)，我們正在避免查詢/請(qǐng)求到下一層。
• 可擴(kuò)展性和成本改進(jìn)：隨著數(shù)據(jù)緩存越來(lái)越接近消費(fèi)者，我們以更低的成本提高了解決方案的可擴(kuò)展性和性能。

靠近客戶端的組件更具可擴(kuò)展性和更便宜，因?yàn)槿齻€(gè)主要原因：

• 這些組件側(cè)重于性能和可用性，但一致性較差。
• 他們只有部分信息：用戶使用更多的數(shù)據(jù)。
• 在瀏覽器的本地緩存的情況下，數(shù)據(jù)生產(chǎn)者沒(méi)有成本。

成本、性能和一致性圖

緩存的最大挑戰(zhàn)是數(shù)據(jù)一致性和數(shù)據(jù)新鮮度， 這意味著數(shù)據(jù)如何在整個(gè)組織內(nèi)同步和更新。根據(jù)用例，我們會(huì)有或多或少的要求限制，因?yàn)樗c緩存圖像相比與庫(kù)存或銷售行為有很大不同。

客戶端緩存

談到客戶端緩存，我們可以有不同類型的緩存，我們將在本文中稍微分析一下：

• HTTP 緩存：這種緩存類型是一種中間緩存系統(tǒng)，因?yàn)樗糠秩Q于服務(wù)器。
• 緩存 API：這是一個(gè)瀏覽器 API，允許我們?cè)跒g覽器中緩存請(qǐng)求。
• 自定義本地緩存： 前端應(yīng)用控制緩存存儲(chǔ)、過(guò)期、失效和更新。

緩存

它在瀏覽器中緩存對(duì)任何資源（CSS、HTML、圖像、視頻等）的 HTTP 請(qǐng)求，并從前端管理所有與存儲(chǔ)、過(guò)期、驗(yàn)證、獲取等相關(guān)的內(nèi)容。應(yīng)用程序的觀點(diǎn)幾乎是透明的，因?yàn)樗猿Ｒ?guī)方式發(fā)出請(qǐng)求并且瀏覽 器執(zhí)行所有“魔術(shù)”。

緩存

控制緩存的方法是使用 HTTP Headers，在服務(wù)器端，它向 HTTP 響應(yīng)添加特定于緩存的標(biāo)頭，例如：“Expires: Tue, 30 Jul 2023 05:30:22 GMT”，然后是瀏覽器知道這個(gè)資源可以被緩存，下次客戶端（應(yīng)用程序）請(qǐng)求同一個(gè)資源時(shí)，如果請(qǐng)求時(shí)間在過(guò)期日期之前，請(qǐng)求將不會(huì)完成，瀏覽器將返回該資源的本地副本。

它允許您設(shè)置響應(yīng)的偽裝方式，因?yàn)橄嗤?URL 可以生成不同的響應(yīng)（并且它們的緩存應(yīng)該以不同的方式處理）。例如，在返回一些數(shù)據(jù)的 API 端點(diǎn)中，我們可以使用請(qǐng)求標(biāo)頭來(lái)Content-type指定我們是否需要 JSON 或 CSV 等格式的響應(yīng)。因此，緩存應(yīng)根據(jù)請(qǐng)求標(biāo)頭與響應(yīng)一起存儲(chǔ)。為此，服務(wù)器應(yīng)該設(shè)置響應(yīng)標(biāo)頭Vary: Accept-Language，讓瀏覽器知道緩存取決于該值。有很多不同的標(biāo)頭來(lái)控制緩存流和行為，但深入研究它不是本文的目標(biāo)。它可能會(huì)在另一篇文章中解決。

正如我們之前提到的，這種緩存類型需要服務(wù)器設(shè)置資源過(guò)期、驗(yàn)證等。所以這不是一種純粹的前端緩存方法或類型，但它是緩存前端應(yīng)用程序使用的資源的最簡(jiǎn)單方法之一，它是我們將在下面提到的另一種方式的補(bǔ)充。

與這種緩存類型相關(guān)，由于它是中間緩存，我們甚至可以將其委托給客戶端和服務(wù)器之間的“一塊”；例如，CDN、反向代理（例如 Varnish）等。

HTTP 緩存的優(yōu)點(diǎn)和缺點(diǎn)

緩存接口

它與 HTTP 緩存方法非常相似，但在這種情況下，我們控制哪些請(qǐng)求被存儲(chǔ)或從緩存中提取。我們必須管理緩存過(guò)期（這并不容易，因?yàn)檫@些緩存被認(rèn)為“永遠(yuǎn)存在”）。即使這些 API 在窗口上下文中可用，也非常適合它們?cè)?worker 上下文中的使用。

該緩存非常適合用于離線應(yīng)用程序。在第一次請(qǐng)求時(shí)，我們可以獲取并緩存它需要的所有資源（圖像、CSS、JS 等），從而允許應(yīng)用程序離線工作。它在移動(dòng)應(yīng)用程序中非常有用，例如，除了天氣數(shù)據(jù)之外，我們的 GPS 系統(tǒng)還可以使用地圖。這使我們即使沒(méi)有連接到服務(wù)器也能獲得遠(yuǎn)足路線的所有信息。

它如何在窗口上下文中工作的一個(gè)示例：

const url = ‘
https://catfact.ninja/breeds’caches.open('v1').then((cache) => {
cache.match((url).then((res) => {
if (res) {
console.log('it is in cache')
console.log(res.json())
} else {
console.log('it is NOT in cache')
fetch(url) .then(res => {
cache.put('test', res.clone())
})
}
})
})

緩存 API 優(yōu)缺點(diǎn)

自定義本地緩存

在某些情況下，我們 需要更多地控制緩存數(shù)據(jù)和失效（不僅僅是過(guò)期）。緩存失效不僅僅是檢查max-age緩存條目。

想象一下我們上面提到的天氣應(yīng)用程序。該應(yīng)用程序允許用戶更新天氣以反映某個(gè)地方的真實(shí)天氣。該應(yīng)用程序需要針對(duì)每個(gè)城市執(zhí)行請(qǐng)求并將溫度值從華氏度轉(zhuǎn)換為攝氏度（這是一個(gè)簡(jiǎn)單的示例：在其他用例中計(jì)算成本可能更高）。

自定義本地緩存

為了避免向服務(wù)器做請(qǐng)求（即使它被緩存），我們可以一次做所有的請(qǐng)求，把所有的數(shù)據(jù)放在一個(gè)我們方便的數(shù)據(jù)結(jié)構(gòu)中，并存儲(chǔ)在，例如在瀏覽器的IndexedDB中，在LocalStorage、SessionStorage 甚至在內(nèi)存中（不推薦）。下次我們要顯示數(shù)據(jù)時(shí)，我們可以從緩存中獲取它，而不僅僅是資源數(shù)據(jù)（甚至是我們所做的計(jì)算），節(jié)省網(wǎng)絡(luò)和計(jì)算時(shí)間。

我們可以通過(guò)在API后面加上發(fā)布時(shí)間來(lái)控制緩存的過(guò)期，也可以控制緩存的失效?，F(xiàn)在想象一下，用戶在其瀏覽器中添加了一只新貓。我們可以讓緩存失效，下次再做請(qǐng)求和計(jì)算，或者更進(jìn)一步，用新數(shù)據(jù)更新我們的本地緩存?；蛘?，另一個(gè)用戶可以更改該值，服務(wù)器將發(fā)送一個(gè)事件以將更改通知給所有客戶端。例如，使用WebSockets，我們的前端應(yīng)用程序可以聽(tīng)到這些事件并使緩存無(wú)效或只更新緩存。

客戶到供應(yīng)商系統(tǒng)

這種緩存需要我們這邊的工作來(lái)檢查緩存并處理可能使其失效或更新的事件等，但非常適合六邊形架構(gòu)，其中使用端口適配器（存儲(chǔ)庫(kù)）從 API 使用數(shù)據(jù)可以聽(tīng)到域事件以對(duì)更改做出反應(yīng)并使某些緩存無(wú)效或更新。

自定義本地緩存優(yōu)缺點(diǎn)

這不是緩存通用解決方案。我們需要考慮它是否適合我們的用例，因?yàn)樗枰谇岸藨?yīng)用程序端工作以使緩存無(wú)效或發(fā)出和處理數(shù)據(jù)更改事件。在大多數(shù)情況下，HTTP 緩存就足夠了。

結(jié)論

擁有緩存解決方案和良好的策略應(yīng)該是任何軟件架構(gòu)中必須的， 但我們的解決方案將是不完整的，并且可能沒(méi)有優(yōu)化。 緩存是我們最好的朋友，主要是在高性能場(chǎng)景中?？雌饋?lái)技術(shù)失效緩存過(guò)程是挑戰(zhàn)，但 最大的挑戰(zhàn)是了解業(yè)務(wù)場(chǎng)景和用例，以確定在數(shù)據(jù)新鮮度和一致性方面的要求，使我們能夠設(shè)計(jì)和選擇最佳策略。