大家好，我是前端西瓜哥。今天講一下 HTTP 緩存策略的強(qiáng)緩存和協(xié)商緩存。

緩存是什么?

緩存(Cache)是一種數(shù)據(jù)存儲(chǔ)技術(shù)，廣泛應(yīng)用在電腦工程領(lǐng)域。

它將原本訪問(wèn)起來(lái)較慢的數(shù)據(jù)，放到訪問(wèn)更快的存儲(chǔ)介質(zhì)中，當(dāng)?shù)诙卧L問(wèn)時(shí)，能夠更快地訪問(wèn)數(shù)據(jù)，是一種 空間換時(shí)間 的做法。

比如，有個(gè)文件經(jīng)常被讀取，且很少改變，那我們就直接將其緩存到內(nèi)存中，節(jié)省掉耗時(shí)的 IO 磁盤(pán)讀取時(shí)間。

再比如，在寫(xiě)代碼時(shí)，我們的一個(gè)方法會(huì)接受參數(shù)，然后計(jì)算返回一個(gè)結(jié)果，假設(shè)這個(gè)計(jì)算過(guò)程非常耗時(shí)，且結(jié)果值只依賴(lài)傳入的參數(shù)。

那我們就可以將參數(shù)和結(jié)果的對(duì)應(yīng)映射，保存到哈希表中，下次如果是相同參數(shù)，就能命中然后直接從哈希表里獲取，速度有了極大提升。

HTTP 緩存也是一樣的道理，用戶(hù)通過(guò) HTTP 請(qǐng)求訪問(wèn)的資源會(huì)緩存到本地，在用戶(hù)第二次訪問(wèn)相同資源時(shí)，直接使用之前緩存的資源。

當(dāng)然資源可能并不一定是不變的，在必要的時(shí)候需要更新緩存。為此我們可能需要設(shè)置一下緩存的有效期，或是發(fā)送一個(gè)占用帶寬小的請(qǐng)求詢(xún)問(wèn)服務(wù)端等等。

這些，就是 HTTP 緩存策略。

強(qiáng)緩存

強(qiáng)緩存，指的是 讓瀏覽器強(qiáng)制緩存服務(wù)端提供的資源。

“東西就給你了，沒(méi)事別找我?！?/p>

Cache-Control: max-age=<seconds>

響應(yīng)頭字段 Cache-Control，通過(guò)設(shè)置 max-age=<seconds>，可以規(guī)定資源的緩存有效時(shí)間長(zhǎng)度，單位為秒。

需要注意的是 Cache-Control 是通用頭字段，請(qǐng)求頭和響應(yīng)頭中都可以使用。

響應(yīng)頭字段的 Cache-Control 用于告知客戶(hù)端如何緩存資源。

客戶(hù)端的 Cache-Control 則是告知服務(wù)器需要多新鮮的資源，比如 no-cache 或 max-age=0 表示要最新鮮的資源。

Cache-Control: max-age=31536000

在瀏覽器 devtool 的 network 面板，我們看到 from disk cache 的字樣，代表這個(gè)資源并沒(méi)有去發(fā)送請(qǐng)求，而是使用了來(lái)自硬盤(pán)的緩存。

如果你不停地刷新頁(yè)面，你還會(huì)看到 from memory cache ：來(lái)自?xún)?nèi)存的緩存。因?yàn)樗⑿虑百Y源正在使用，還在內(nèi)存中，刷新后瀏覽器就直接從內(nèi)存中取出來(lái)了。

當(dāng)你強(qiáng)制刷新時(shí)，瀏覽器會(huì)在請(qǐng)求頭中加上 Cache-Control: no-cache 或是 Cache-Control: max-age=0，要求服務(wù)端返回最新資源。

Expires

Cache-Control: max-age= ，是緩存的有效時(shí)長(zhǎng)。

當(dāng)看到一個(gè)叫 max-age(有效時(shí)長(zhǎng))的東西時(shí)，我們經(jīng)常會(huì)發(fā)現(xiàn)它的孿生兄弟：Expires(過(guò)期時(shí)間點(diǎn))。如果你熟悉 Cookies，你會(huì)發(fā)現(xiàn) Cookies 也有這么一對(duì)屬性。

Expires: Wed, 21 Oct 2015 07:28:00 GMT

Expires 使用的 GMT 格式的時(shí)間戳字符串。

當(dāng) max-age 和 Expires 都存在時(shí)，使用 max-age。這點(diǎn)和 Cookies 一樣。

強(qiáng)緩存，就是讓瀏覽器將資源緩存下來(lái)，在緩存過(guò)期前，不發(fā)送請(qǐng)求獲取新資源，而是直接使用本地資源。

協(xié)商緩存

協(xié)商緩存，是在緩存過(guò)期的情況下，客戶(hù)端和服務(wù)端協(xié)商，確認(rèn)客戶(hù)端緩存是否需要更新。

Last-Modified 和 If-Modified-Since

響應(yīng)頭字段 Last-Modified 表示提供的資源最后被修改的時(shí)間。值是 GMT 格式的字符串。

Last-Modified: Sat, 09 Apr 2022 14:47:36 GMT

這個(gè)時(shí)間會(huì)標(biāo)記在對(duì)應(yīng)緩存上，起到標(biāo)識(shí)的作用。

當(dāng)瀏覽器的緩存失效后，會(huì)再次請(qǐng)求服務(wù)端，并帶上 If-Modified-Since 請(qǐng)求頭字段，它的值就是之前 Last-Modified 帶過(guò)來(lái)的值。

If-Modified-Since: Sat, 09 Apr 2022 14:47:36 GMT

當(dāng)服務(wù)端發(fā)現(xiàn)資源最后修改時(shí)間和 If-modified-since 值相等，代表資源從該時(shí)間后再未改變過(guò)。

服務(wù)端于是返回 304(Not Modified)狀態(tài)碼，表示資源沒(méi)有改變，并且響應(yīng)體為空。瀏覽器拿到后，就知道原本可能過(guò)期的緩存其實(shí)還可以繼續(xù)使用。

如果資源改變了，就會(huì)返回 200，且響應(yīng)體帶上最新資源。

ETag 和 If-None-Match

除了用 Last-Modified 代表的資源最后修改時(shí)間作為標(biāo)識(shí)，我們還可以使用 ETag 響應(yīng)頭。

ETag 的值沒(méi)有規(guī)定，你可以是時(shí)間戳的哈希值，也可以是版本號(hào)。

另外 ETag 分為強(qiáng) ETag 和弱 ETag，其中弱 ETag 以為 W/ 開(kāi)頭。

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
ETag: W/"0815"

然后和 If-Modified-Since 一樣，當(dāng)緩存過(guò)期時(shí)，客戶(hù)端會(huì)在請(qǐng)求頭帶上 If-None-Match 去請(qǐng)求資源。

If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

如果資源依舊新鮮，則返回 304，客戶(hù)端繼續(xù)復(fù)用本地資源。

結(jié)尾

強(qiáng)緩存，設(shè)置一個(gè)過(guò)期時(shí)間，讓客戶(hù)端在過(guò)期前使用本地緩存，直到過(guò)期才請(qǐng)求更新鮮的資源。涉及的頭字段有 Cache-Control: max-age= 或 Expires 。

協(xié)商緩存，在客戶(hù)端緩存過(guò)期的情況下，和服務(wù)端協(xié)商一下，是否可以繼續(xù)使用本地緩存。涉及的頭字段有 Last-Modified / If-Modified-Since 和 ETag / If-None-Match。

不過(guò)需要注意的是，這些都只是規(guī)范，我們無(wú)法確定客戶(hù)端或服務(wù)端在實(shí)現(xiàn)上完全遵循，而且可能在版本更新中會(huì)出現(xiàn)一些 bug。

所以對(duì)于發(fā)生變化的文件，我更傾向于給文件名加上哈希串。畢竟，訪問(wèn)一個(gè)從來(lái)沒(méi)訪問(wèn)過(guò)的資源，客戶(hù)端是不會(huì)有緩存的。這樣就能繞開(kāi)緩存機(jī)制，真正拿到最新資源，而不會(huì)掉入緩存陷阱。

參考

• RFC7234 - Request Cache-Control Directives：https://www.rfc-editor.org/rfc/rfc7234#section-5.2.1。
• RFC7232 - Weak versus Strong：https://www.rfc-editor.org/rfc/rfc7232#section-2.1。
• stackoverflow - What takes precedence: the ETag or Last-Modified HTTP header?：https://stackoverflow.com/questions/824152/what-takes-precedence-the-etag-or-last-modified-http-header。