Http 緩存機(jī)制作為 web 性能優(yōu)化的重要手段，對于從事 Web 開發(fā)的同學(xué)們來說，應(yīng)該是知識體系庫中的一個(gè)基礎(chǔ)環(huán)節(jié)，同時(shí)對于有志成為前端架構(gòu)師的同學(xué)來說是必備的知識技能。但是對于很多前端同學(xué)來說，僅僅只是知道瀏覽器會對請求的靜態(tài)文件進(jìn)行緩存，但是為什么被緩存，緩存是怎樣生效的，卻并不是很清楚。在此，我會嘗試用簡單明了的文字，像大家系統(tǒng)的介紹HTTP緩存機(jī)制，期望對各位正確的理解前端緩存有所幫助。

使用緩存有如下幾個(gè)好處：

• 緩存減少了冗余的數(shù)據(jù)傳輸， 節(jié)省了你的網(wǎng)絡(luò)費(fèi)用。
• 緩存緩解了網(wǎng)絡(luò)瓶頸的問題。 不需要更多的帶寬就能夠更快地加載頁面。
• 緩存降低了對原始服務(wù)器的要求。 服務(wù)器可以更快地響應(yīng)，避免過載的出現(xiàn)。
• 緩存降低了距離時(shí)延， 因?yàn)閺妮^遠(yuǎn)的地方加載頁面會更慢一些。

在介紹HTTP緩存之前，作為知識鋪墊，先簡單介紹一下HTTP報(bào)文

HTTP報(bào)文就是瀏覽器和服務(wù)器間通信時(shí)發(fā)送及響應(yīng)的數(shù)據(jù)塊。
瀏覽器向服務(wù)器請求數(shù)據(jù)，發(fā)送請求(request)報(bào)文；服務(wù)器向?yàn)g覽器返回?cái)?shù)據(jù)，返回響應(yīng)(response)報(bào)文。
報(bào)文信息主要分為兩部分

• 包含屬性的首部(header)--------------------------附加信息（cookie，緩存信息等）與緩存相關(guān)的規(guī)則信息，均包含在header中
• 包含數(shù)據(jù)的主體部分(body)-----------------------HTTP請求真正想要傳輸?shù)牟糠?/li>

HTTP緩存有多種規(guī)則，根據(jù)是否需要重新向服務(wù)器發(fā)起請求來分類，我將其分為兩大類(強(qiáng)制緩存，協(xié)商緩存)

強(qiáng)制緩存：

強(qiáng)制緩存整體流程比較簡單，就是在第一次訪問服務(wù)器取到數(shù)據(jù)之后，在過期時(shí)間之內(nèi)不會再去重復(fù)請求。實(shí)現(xiàn)這個(gè)流程的核心就是如何知道當(dāng)前時(shí)間是否超過了過期時(shí)間。

http 1.0

在 http 1.0 版本中，強(qiáng)制緩存通過 Expires 響應(yīng)頭來實(shí)現(xiàn)。 expires 表示未來資源會過期的時(shí)間。也就是說，當(dāng)發(fā)起請求的時(shí)間超過了 expires 設(shè)定的時(shí)間，即表示資源緩存時(shí)間到期，會發(fā)送請求到服務(wù)器重新獲取資源。而如果發(fā)起請求的時(shí)間在 expires 限定的時(shí)間之內(nèi)，瀏覽器會直接讀取本地緩存數(shù)據(jù)庫中的信息，兩種方式根據(jù)瀏覽器的策略隨機(jī)獲取。

http 1.1

在 http 1.1 版本中，強(qiáng)制緩存通過 Cache-Control 響應(yīng)頭來實(shí)現(xiàn)。Cache-Control 擁有多個(gè)值：

• private：客戶端可以緩存
• public：客戶端和代理服務(wù)器均可緩存；
• max-age=xxx：緩存的資源將在 xxx 秒后過期；
• no-cache：需要使用協(xié)商緩存來驗(yàn)證是否過期；
• no-store：不可緩存(幾乎很少用)

最常用的字段就是 max-age=xxx ，表示緩存的資源將在 xxx 秒后過期。一般來說，為了兼容，兩個(gè)版本的強(qiáng)制緩存都會被實(shí)現(xiàn)。最常用的字段就是 max-age=xxx ，表示緩存的資源將在 xxx 秒后過期。一般來說，為了兼容，兩個(gè)版本的強(qiáng)制緩存都會被實(shí)現(xiàn)。

協(xié)商緩存：

瀏覽器第一次請求數(shù)據(jù)時(shí)，服務(wù)器會將緩存標(biāo)識與數(shù)據(jù)一起返回給客戶端，客戶端將二者備份至緩存數(shù)據(jù)庫中。再次請求數(shù)據(jù)時(shí)，客戶端將備份的緩存標(biāo)識發(fā)送給服務(wù)器，服務(wù)器根據(jù)緩存標(biāo)識進(jìn)行判斷，判斷成功后，返回304狀態(tài)碼，通知客戶端比較成功，可以使用緩存數(shù)據(jù)

• Last-Modified / If-Modified-Since

再次請求服務(wù)器時(shí)，通過此字段通知服務(wù)器上次請求時(shí)，服務(wù)器返回的資源最后修改時(shí)間。
服務(wù)器收到請求后發(fā)現(xiàn)有頭If-Modified-Since 則與被請求資源的最后修改時(shí)間進(jìn)行比對。
若資源的最后修改時(shí)間大于If-Modified-Since，說明資源又被改動(dòng)過，則響應(yīng)整片資源內(nèi)容，返回狀態(tài)碼200；
若資源的最后修改時(shí)間小于或等于If-Modified-Since，說明資源無新修改，則響應(yīng)HTTP 304，告知瀏覽器繼續(xù)使用所保存的cache。

• Etag/If-None-Match（優(yōu)先級高于Last-Modified/If-Modified-Since）

Etag：服務(wù)器響應(yīng)請求時(shí)，告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識（生成規(guī)則由服務(wù)器決定）。

If-None-Match：
再次請求服務(wù)器時(shí)，通過此字段通知服務(wù)器客戶段緩存數(shù)據(jù)的唯一標(biāo)識。
服務(wù)器收到請求后發(fā)現(xiàn)有頭If-None-Match 則與被請求資源的唯一標(biāo)識進(jìn)行比對，
不同，說明資源又被改動(dòng)過，則響應(yīng)整片資源內(nèi)容，返回狀態(tài)碼200；
相同，說明資源無新修改，則響應(yīng)HTTP 304，告知瀏覽器繼續(xù)使用所保存的cache。

img