相信很多前端童鞋對(duì)于瀏覽器緩存都不太陌生，但是如果沒有系統(tǒng)的歸納總結(jié)，可能三言兩句很難說明白。如何才能完美的回答，這是一個(gè)值得思考的問題。

當(dāng)然，我們不能為了應(yīng)對(duì)面試才去掌握，而應(yīng)該當(dāng)作技能儲(chǔ)備起來，做到活學(xué)活用。

一、為什么要緩存

1.緩存可以減少用戶等待時(shí)間，提升用戶體驗(yàn);

2.減少網(wǎng)絡(luò)帶寬消耗

對(duì)于網(wǎng)站運(yùn)營者和用戶，帶寬都代表著成本，過多的帶寬消耗，都需要支付額外的費(fèi)用。如果可以使用緩存，只會(huì)產(chǎn)生極小的網(wǎng)絡(luò)流量，這將有效的降低運(yùn)營成本。

3.降低服務(wù)器壓力

給網(wǎng)絡(luò)資源設(shè)定有效期之后，用戶可以重復(fù)使用本地的緩存，減少對(duì)源服務(wù)器的請(qǐng)求，降低服務(wù)器的壓力。此外，搜索引擎的爬蟲機(jī)器人也能根據(jù)過期機(jī)制降低爬取的頻率，也能有效降低服務(wù)器的壓力。

需要注意：緩存使用不當(dāng)，會(huì)有「臟數(shù)據(jù)」，導(dǎo)致用戶數(shù)據(jù)異常。

二、常見緩存類型

瀏覽器緩存分為強(qiáng)緩存和協(xié)商緩存。

強(qiáng)緩存

1.Expires：GMT 格式的時(shí)間字符串，代表緩存資源的過期時(shí)間

Expires 也是需要在服務(wù)端配置（具體配置也根據(jù)服務(wù)器而定），Expires 添加的是該資源過期的日期。瀏覽器會(huì)根據(jù)該過期日期與客戶端時(shí)間對(duì)比，如果過期時(shí)間還沒到，則會(huì)去緩存中讀取該資源，如果已經(jīng)到期了，則瀏覽器判斷為該資源已經(jīng)不新鮮要重新從服務(wù)端獲取。

通過這種方式，可以實(shí)現(xiàn)直接從瀏覽器緩存中讀取，而不需要去服務(wù)端判斷是否已經(jīng)緩存，避免了這次 HTTP 請(qǐng)求。值得注意的是 Expires 時(shí)間可能存在 客戶端時(shí)間跟服務(wù)端時(shí)間不一致 的問題。

建議 Expires 結(jié)合 Cache-Control 一起使用，大型網(wǎng)站中一起使用的情況比較多見。

2.Cache-Control： max-age 強(qiáng)緩存利用其 max-age 值來判斷緩存資源的最大生命周期，它的值單位為秒。

Cache-Control 屬性值是在 server 端配置的，不同的服務(wù)器有不同的配置，web 服務(wù)器 apache、nginx、IIS ，應(yīng)用服務(wù)器 tomcat 等配置都不盡相同;

協(xié)商緩存

1.Last-Modified：值為資源最后更新時(shí)間，隨服務(wù)器 Response 返回

2.If-Modified-Since：通過比較兩個(gè)時(shí)間來判斷資源在兩次請(qǐng)求期間是否有過修改，如果沒有修改，則命中協(xié)商緩存。

3.ETag：表示資源內(nèi)容的唯一標(biāo)識(shí)，隨服務(wù)器 Response 返回。

Web 服務(wù)器響應(yīng)請(qǐng)求時(shí)，告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識(shí)

注：HTTP 中并沒有指定如何生成 ETag，哈希是比較理想的選擇。

4.If-None-Match

服務(wù)器通過比較請(qǐng)求頭部的 If-None-Match 與當(dāng)前資源的 ETag 是否一致來判斷資源是否在兩次請(qǐng)求之間有過修改，如果沒有修改，則命中協(xié)商緩存。

三、緩存流程解析

看完上面的概念，我們來看看緩存流程是怎樣的？先來看看下面這張圖：

如上圖所示：

1.瀏覽器會(huì)先檢測強(qiáng)緩存類型（Cache-Control 或者 Expires）是否有效;

2.如果命中了強(qiáng)緩存，則直接從本地獲取緩存資源;

3.當(dāng)強(qiáng)緩存沒有命中時(shí)，客戶端會(huì)發(fā)送請(qǐng)求到服務(wù)器，服務(wù)器通過另一些 Request Header 驗(yàn)證這個(gè)資源是否命中協(xié)商緩存，稱為 HTTP 再驗(yàn)證，如果命中，服務(wù)器將請(qǐng)求返回，但不返回資源，而是告訴客戶端直接從緩存中獲取，客戶端收到返回后就會(huì)從緩存中獲取資源;

4.強(qiáng)緩存不會(huì)發(fā)送請(qǐng)求到服務(wù)器，但協(xié)商緩存會(huì)發(fā)送服務(wù)器請(qǐng)求;

5.當(dāng)協(xié)商緩存也沒命中時(shí)，服務(wù)器就會(huì)將資源發(fā)送回客戶端。

需要注意：

1.強(qiáng)緩存和協(xié)商緩存共同之處在于，如果命中緩存，服務(wù)器都不會(huì)返回資源;

2.當(dāng) F5 刷新網(wǎng)頁時(shí)，跳過強(qiáng)緩存，但是會(huì)檢查協(xié)商緩存;

3.當(dāng) Ctrl + F5 強(qiáng)制刷新頁面時(shí)，直接從服務(wù)器加載，跳過強(qiáng)緩存和協(xié)商緩存;

四、不會(huì)緩存的情況

當(dāng)然并不是所有請(qǐng)求都能被緩存，無法被瀏覽器緩存的請(qǐng)求如下：

1.HTTP 信息頭中包含 Cache-Control:no-cache ，pragma:no-cache（HTTP1.0），或Cache-Control： max-age=0 等告訴瀏覽器不用緩存的請(qǐng)求;

2.需要根據(jù) Cookie，認(rèn)證信息等決定輸入內(nèi)容的動(dòng)態(tài)請(qǐng)求是不能被緩存的;

3.經(jīng)過 HTTPS 安全加密的請(qǐng)求;

4.POST 請(qǐng)求無法被緩存;

5.HTTP 響應(yīng)頭中不包含 Last-Modified/Etag，也不包含 Cache-Control/Expires 的請(qǐng)求無法被緩存;

五、小故事大道理

上文對(duì)整個(gè)概念做了闡述，還是不夠形象，我們來通過幾個(gè)小故事生動(dòng)理解一下：

故事一：Last-Modified

瀏覽器：Hi，我需要 jartto.min.js 這個(gè)文件，如果是在 Last-Modified： Fri Feb 15 2019 19:57:31 GMT 之后修改過的，請(qǐng)發(fā)給我。

服務(wù)器：（檢查文件的修改時(shí)間）

服務(wù)器：Oh，這個(gè)文件在那個(gè)時(shí)間之后沒有被修改過，你已經(jīng)有最新的版本了。

瀏覽器：太好了，那我就顯示給用戶了。

故事二：ETag

瀏覽器：Hi，我需要 jartto.css 這個(gè)文件，有沒有不匹配 3c61f-1c1-2aecb436 這個(gè)串的

服務(wù)器：（檢查 ETag…）

服務(wù)器：Hey，我這里的版本也是 3c61f-1c1-2aecb436，你已經(jīng)是最新的版本了

瀏覽器：好，那就可以使用本地緩存了

看完這兩個(gè)小故事，是否對(duì)協(xié)商緩存有了更清晰的認(rèn)識(shí)了。

責(zé)任編輯：ct