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

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

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

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

無緩存

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

Cache-Control: no-cache

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

Cache-Control: no-store

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

Cache-Control: max-age=7200

Expiresheader

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

如果有，它會檢查頁面的新鮮度。

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

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

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

協(xié)商緩存

如果緩存過期了，我們就可以使用協(xié)商緩存來解決問題。協(xié)商緩存需要請求，如果緩存有效會返回 304 Not Modified。

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

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

If-Modified-Since和 Last-Modified

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

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

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

這包括了發(fā)送的請求和頁面請求。

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

If-None-Match和 ETag

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

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

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

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

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

Last-Modified 與 ETag 的對比

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

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

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

緩存位置

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

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

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

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

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

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