HTTP 緩存策略:強(qiáng)緩存和協(xié)商緩存
大家好,我是前端西瓜哥。今天講一下 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。