摘要：用于防止重要的信息被無(wú)意的發(fā)布。只有特定用戶才能使用緩存，適用于公共緩存服務(wù)器的情況。強(qiáng)緩存的過(guò)程強(qiáng)緩存瀏覽器直接從本地緩存中獲取數(shù)據(jù)，不與服務(wù)器進(jìn)行交互。當(dāng)瀏覽器發(fā)現(xiàn)緩存過(guò)期后，緩存并不一定不能使用了。

歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~

本文由前端林子發(fā)表于云+社區(qū)專欄
瀏覽器緩存，是瀏覽器端保存數(shù)據(jù)，用于快速讀取或避免重復(fù)資源請(qǐng)求的優(yōu)化機(jī)制，有效的緩存使用可以避免重復(fù)的網(wǎng)絡(luò)請(qǐng)求和加快頁(yè)面速度,從而提高用戶體驗(yàn)。

以一個(gè)接口返回的響應(yīng)頭為例：

這里我畫了張思維導(dǎo)圖，對(duì)Expires和Cache-Control做比較：

具體介紹Expires和Cache-Control：

Expires:

(1)Expires是HTTP1.0的東西，現(xiàn)在默認(rèn)瀏覽器均默認(rèn)使用HTTP 1.1，所以它的作用基本忽略；

(2)Expires規(guī)定了緩存失效時(shí)間（Date為當(dāng)前時(shí)間），是絕對(duì)時(shí)間。由于Expires返回的是一個(gè)絕對(duì)時(shí)間，在服務(wù)器時(shí)間與客戶端時(shí)間相差較大的時(shí)候，緩存命中不準(zhǔn)確；

Cache-Control：

(1)Cache-Control是HTTP1.1的

(2)Cache-Control的max-age規(guī)定了緩存有效時(shí)間（2552s)，是相對(duì)時(shí)間；

(3)若響應(yīng)頭Expires和Cache-Control同時(shí)存在，Cache-Control優(yōu)先級(jí)高于Expires

Cache-Control的常用指令：

no-cache：不使用本地緩存，需要使用協(xié)商緩存，也就是先與服務(wù)器確認(rèn)緩存是否可用。

no-store：禁用緩存。用于防止重要的信息被無(wú)意的發(fā)布。在請(qǐng)求消息中發(fā)送將使得請(qǐng)求和響應(yīng)消息都不使用緩存。

public：其他用戶也可使用緩存，適用于公共緩存服務(wù)器的情況。

private：只有特定用戶才能使用緩存，適用于公共緩存服務(wù)器的情況。

max-age：客戶機(jī)可以接收生存期不大于指定時(shí)間（以秒為單位）的響應(yīng)。

min-fresh客戶機(jī)可以接收響應(yīng)時(shí)間小于當(dāng)前時(shí)間加上指定時(shí)間的響應(yīng)。

max-stale指示客戶機(jī)可以接收超出超時(shí)期間的響應(yīng)消息。如果指定max-stale消息的值，那么客戶機(jī)可以接收超出超時(shí)期指定值之內(nèi)的響應(yīng)消息。

注意：no-cache指令并不是不緩存，no-cache的意思是可以緩存，但每次用應(yīng)該去向服務(wù)器驗(yàn)證緩存是否可用。no-store才是不緩存內(nèi)容。

強(qiáng)緩存：瀏覽器直接從本地緩存中獲取數(shù)據(jù)，不與服務(wù)器進(jìn)行交互。

· 瀏覽器第一次跟服務(wù)器請(qǐng)求一個(gè)資源，服務(wù)器在返回這個(gè)資源的同時(shí)，在response的header會(huì)加上Expires/Cache-Control的header；

· 瀏覽器再請(qǐng)求這個(gè)資源時(shí)，先從緩存中尋找，找到這個(gè)資源后，比較Expires或Cache-Control的max-age字段值做比較, 如果在有效期內(nèi)，則讀取緩存內(nèi)容；若緩存已過(guò)期，則重新向服務(wù)器發(fā)送請(qǐng)求；

· header在重新加載的時(shí)候會(huì)被更新

這里我畫了兩張圖，瀏覽器第一次請(qǐng)求：

瀏覽器第一次請(qǐng)求

瀏覽器再次請(qǐng)求：

強(qiáng)緩存

對(duì)于強(qiáng)緩存，chrome瀏覽器的狀態(tài)碼：

200 OK(from disk cache)或是200 OK (from memory cache)

例如：請(qǐng)求某個(gè)圖片后，當(dāng)瀏覽器再次訪問(wèn)這個(gè)圖片時(shí)，發(fā)現(xiàn)有這個(gè)圖片的緩存，且緩存沒過(guò)期，所以就使用緩存。

當(dāng)瀏覽器發(fā)現(xiàn)緩存過(guò)期后，緩存并不一定不能使用了。比如文件雖然過(guò)了有效期，但內(nèi)容并沒有發(fā)生改變，還是可以用緩存數(shù)據(jù)。所以，這個(gè)時(shí)候需要與服務(wù)器協(xié)商，讓服務(wù)器判斷本地緩存是否還能使用。那么又怎么判斷服務(wù)端文件有沒有更新呢？主要有兩種方式：

Last-Modified，If-Modified-since。

以一個(gè)返回的接口為例：

Last-Modified的格式：

Last-Modified: Mon, 17 Sep 2018 12:06:18 GMT

If-Modified-Since的格式：

If-Modified-Since: Mon, 17 Sep 2018 12:06:18 GMT

web服務(wù)器響應(yīng)請(qǐng)求時(shí)，告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識(shí)（生成規(guī)則由服務(wù)器決定）。Apache中，ETag的值默認(rèn)是對(duì)文件的索引節(jié)（INode），大小（Size）和最后修改時(shí)間（MTime）進(jìn)行Hash后得到的。

瀏覽器第一次請(qǐng)求：

瀏覽器第一次緩存

瀏覽器再一次請(qǐng)求：

協(xié)商緩存

Last-Modified、If-Modified-Since：

· 瀏覽器第一次向服務(wù)器請(qǐng)求一個(gè)資源，服務(wù)器在返回這個(gè)資源的同時(shí)，在respone的header加上Last-Modified字段，表示該資源在服務(wù)器上的最后修改時(shí)間；

· 瀏覽器再次向服務(wù)器請(qǐng)求這個(gè)資源時(shí)，在request的header上加上If-Modified-Since字段，這個(gè)值就是上一次請(qǐng)求時(shí)返回的Last-Modified的值;

·服務(wù)器收到資源請(qǐng)求時(shí)，比較If-Modified-Since字段值和被請(qǐng)求資源的最后修改時(shí)間，若資源最后修改時(shí)間較舊，則說(shuō)明文件沒有修改，返回304 Not Modified, 瀏覽器從緩存中加載資源；若不相同，說(shuō)明文件被更新，瀏覽器直接從服務(wù)器加載資源, 返回200；

·重新加載資源時(shí)更新Last-Modified Header

Etag、If-None-Match

· 瀏覽器第一次向服務(wù)器請(qǐng)求一個(gè)資源，服務(wù)器在返回這個(gè)資源的同時(shí)，在respone的header加上ETag字段；

·瀏覽器再次跟服務(wù)器請(qǐng)求這個(gè)資源時(shí)，在request的header上加上If-None-Match，這個(gè)值就是上一次請(qǐng)求時(shí)返回的ETag的值；

·服務(wù)器再次收到資源請(qǐng)求時(shí)，再根據(jù)資源生成一個(gè)新的ETag，與瀏覽器傳過(guò)來(lái)If-None-Match比較，如果這兩個(gè)值相同，則說(shuō)明資源沒有變化，返回304 Not Modified, 瀏覽器從緩存中加載資源，否則返回200 資源內(nèi)容。與Last-Modified不一樣的是，當(dāng)服務(wù)器返回304 Not Modified的響應(yīng)時(shí)，由于ETag重新生成過(guò)，response header中還會(huì)把這個(gè)ETag返回，即使這個(gè)ETag跟之前的沒有變化

HTTP1.1中ETag的出現(xiàn)主要是為了解決幾個(gè)Last-Modified比較難解決的問(wèn)題：

·一些文件也許會(huì)周期性的更改，但是他的內(nèi)容并不改變(僅僅改變的修改時(shí)間)，這個(gè)時(shí)候我們并不希望客戶端認(rèn)為這個(gè)文件被修改了，而重新GET；

·某些文件修改非常頻繁，比如在秒以下的時(shí)間內(nèi)進(jìn)行修改，(比方說(shuō)1s內(nèi)修改了N次)，If-Modified-Since能檢查到的粒度是s級(jí)的，這種修改無(wú)法判斷(或者說(shuō)UNIX記錄MTIME只能精確到秒)；

·某些服務(wù)器不能精確的得到文件的最后修改時(shí)間。

對(duì)于上述情景，利用ETag能夠更加準(zhǔn)確的控制緩存，因?yàn)镋Tag是服務(wù)器自動(dòng)生成的資源在服務(wù)器端的唯一標(biāo)識(shí)符，資源每次變動(dòng)，都會(huì)生成新的ETag值。Last-Modified與ETag是可以一起使用的，但服務(wù)器會(huì)優(yōu)先驗(yàn)證ETag。

基于上文對(duì)強(qiáng)緩存和協(xié)商緩存過(guò)程的解釋，這里我把強(qiáng)緩存和協(xié)商緩存繪制在一張圖里，方便比較，具體過(guò)程可以參照上文：

http緩存

本文主要通過(guò)圖解介紹了http的緩存，具體包括強(qiáng)緩存和協(xié)商緩存。如有問(wèn)題，歡迎指正。

相關(guān)閱讀
【每日課程推薦】機(jī)器學(xué)習(xí)實(shí)戰(zhàn)！快速入門在線廣告業(yè)務(wù)及CTR相應(yīng)知識(shí)

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布，更多原文請(qǐng)點(diǎn)擊

搜索關(guān)注公眾號(hào)「云加社區(qū)」，第一時(shí)間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！

海量技術(shù)實(shí)踐經(jīng)驗(yàn)，盡在云加社區(qū)！