緩存是一種可以幫助網(wǎng)絡(luò)連接更快的技術(shù)，因?yàn)樾枰獋鬏數(shù)臇|西越少越好。

許多資源可能非常大，檢索的時(shí)間和實(shí)際成本（例如，在移動(dòng)設(shè)備上）都非常昂貴。

HTTP緩存是用于減少HTTP請(qǐng)求次數(shù)和提高Web應(yīng)用程序性能的重要技術(shù)。Web瀏覽器和Web服務(wù)器可以通過(guò)HTTP頭控制HTTP緩存。

以下是HTTP緩存的一些重要概念：

無(wú)緩存

首先，Cache-Control header 可以通過(guò)使用 no-cache 值，告訴瀏覽器在不首先檢查 ETag 值（稍后將對(duì)此進(jìn)行詳細(xì)介紹）的情況下永遠(yuǎn)不要使用資源的緩存版本：

Cache-Control: no-cache

更嚴(yán)格的 no-store 選項(xiàng)告訴瀏覽器（以及所有中間網(wǎng)絡(luò)設(shè)備）不將資源存儲(chǔ)在其緩存中：

Cache-Control: no-store

如果 Cache-Control 有 max-age 值，則該值用于確定此資源作為緩存有效的秒數(shù)：

Cache-Control: max-age=7200

Expiresheader

當(dāng)發(fā)送 HTTP 請(qǐng)求時(shí)，瀏覽器根據(jù)所需的 URL 檢查緩存中是否有該頁(yè)面的副本。

如果有，它會(huì)檢查頁(yè)面的新鮮度。

如果 HTTP 響應(yīng) Expires header 值小于當(dāng)前日期時(shí)間，則頁(yè)面是最新的。

Expires header 采用以下形式：

Expires: Tue, 04 Oct 2022 19:00:00 GMT

強(qiáng)緩存

HTTP/1.0 使用的是 Expires header，HTTP/1.1 使用的是 Cache-Control header。

• Expires 即過(guò)期時(shí)間，時(shí)間是相對(duì)于服務(wù)器的時(shí)間而言的，存在于服務(wù)端返回的響應(yīng)頭中，在這個(gè)過(guò)期時(shí)間之前可以直接從緩存中獲取數(shù)據(jù)，無(wú)需再次請(qǐng)求。但這種方式存在一個(gè)問(wèn)題：無(wú)需再次請(qǐng)求服務(wù)器的時(shí)間和瀏覽器的時(shí)間可能并不一致。
• 在 HTTP/1.1 中，使用的是 Cache-Control header，這個(gè) header 采用的時(shí)間是過(guò)期時(shí)長(zhǎng)，對(duì)應(yīng)的值是 max-age=*。

當(dāng) Expires 和 Cache-Control 同時(shí)存在時(shí)，優(yōu)先考慮 Cache-Control header。當(dāng)緩存資源失效了，也就是沒(méi)有命中強(qiáng)緩存，接下來(lái)就進(jìn)入?yún)f(xié)商緩存。

協(xié)商緩存

如果緩存過(guò)期了，我們就可以使用協(xié)商緩存來(lái)解決問(wèn)題。協(xié)商緩存需要請(qǐng)求，如果緩存有效會(huì)返回 304 Not Modified。

• 使用 If-Modified-Since 和 Last-Modified
• 使用 If-None-Match 和 ETag

所有這些都基于使用 If-* 請(qǐng)求頭，并且 ETag 優(yōu)先級(jí)? Last-Modified 高。

If-Modified-Since和 Last-Modified

它添加一個(gè) If-Modified-Since header，基于從當(dāng)前緩存頁(yè)面獲得的 Last-Modified header 值。

Last-Modified 表示本地文件最后修改時(shí)間，If-Modified-Since 會(huì)將當(dāng)前緩存頁(yè)面獲得的 Last-Modified 的 header 值發(fā)送給服務(wù)器，詢問(wèn)服務(wù)器在該時(shí)間后資源是否有更新，有更新的話就會(huì)將新的資源發(fā)送回來(lái)。

否則，服務(wù)器將返回一個(gè) 304 Not Modified 響應(yīng)。

這包括了發(fā)送的請(qǐng)求和頁(yè)面請(qǐng)求。

但是如果在本地打開緩存文件，就會(huì)造成 Last-Modified 被修改，所以在 HTTP/1.1 出現(xiàn)了 ETag。

If-None-Match和 ETag

web 服務(wù)器（取決于設(shè)置、頁(yè)面的服務(wù)方式等）可以發(fā)送 ETag header。

這是資源的標(biāo)識(shí)符，類似于文件指紋。每次資源改變時(shí)，ETag 也應(yīng)該改變。

它就像一個(gè)校驗(yàn)和（checksum）。

瀏覽器發(fā)送一個(gè) If-None-Match header，其中包含一個(gè)（或多個(gè)）ETag 值。發(fā)送到服務(wù)器后，詢問(wèn)該資源 ETag 是否變動(dòng)，有變動(dòng)的話就將新的資源發(fā)送回來(lái)。

否則返回 304 Not Modified 響應(yīng)。

Last-Modified 與 ETag 的對(duì)比

性能上，Last-Modified 優(yōu)于 ETag，Last-Modified 記錄的是時(shí)間點(diǎn)，而 ETag 需要根據(jù)文件的 MD5 算法生成對(duì)應(yīng)的 hash 值。

精度上，ETag 優(yōu)于 Last-Modified。ETag 按照內(nèi)容給資源帶上標(biāo)識(shí)，能準(zhǔn)確感知資源變化，Last-Modified 在某些場(chǎng)景并不能準(zhǔn)確感知變化。

如果兩者都存在，優(yōu)先判斷 If-None-Match 進(jìn)行 ETag 協(xié)商緩存。

緩存位置

當(dāng)命中強(qiáng)緩存和協(xié)商緩存返回 304 時(shí)，瀏覽器會(huì)從緩存中獲取資源。

瀏覽器中的緩存位置一共有四種，按優(yōu)先級(jí)從高到低排列分別是：

• Service Worker — 其借鑒了 Web Worker 思路，主要功能有：離線緩存、消息推送和網(wǎng)絡(luò)代理，其中離線緩存就是 Service Worker Cache。
• Memory Cache — 內(nèi)存緩存，從效率上講它是最快的，從存活時(shí)間來(lái)講又是最短的，當(dāng)渲染進(jìn)程結(jié)束后，內(nèi)存緩存也就不存在了。
• Disk Cache — 存儲(chǔ)在磁盤中的緩存，從存取效率上講是比內(nèi)存緩存慢的，優(yōu)勢(shì)在于存儲(chǔ)容量和存儲(chǔ)時(shí)長(zhǎng)。
• Push Cache — 推送緩存，它瀏覽器緩存的最后一道防線，它是 HTTP/2 的內(nèi)容。

瀏覽器在選擇 Disk Cache 與 Memory Cache 的存儲(chǔ)上：內(nèi)容使用率高的，文件優(yōu)先進(jìn)入磁盤。比較大的 JS、CSS 文件會(huì)直接放入磁盤，反之放入內(nèi)存。

強(qiáng)緩存與協(xié)商緩存區(qū)別

• 強(qiáng)緩存 — 瀏覽器不會(huì)與服務(wù)端協(xié)商，而是直接獲取瀏覽器緩存。
• 協(xié)商緩存 — 瀏覽器會(huì)先向服務(wù)器確認(rèn)資源的有效性后，才決定是從緩存中獲取資源還是重新獲取資源。
• 強(qiáng)緩存在瀏覽器進(jìn)行判斷，而協(xié)商緩存在服務(wù)端進(jìn)行判斷。