現(xiàn)代瀏覽器為了最大化的復(fù)用資源剃袍，減少網(wǎng)絡(luò)請求善绎，都提供了緩存機(jī)制黔漂。所謂緩存，就是在某次網(wǎng)絡(luò)請求過程中保存的一份資源副本禀酱，在下一次對相同 URL 進(jìn)行請求時炬守，就可以從資源副本中讀取內(nèi)容，無需讓服務(wù)器再發(fā)送一次剂跟。
這里有一個簡單的流程圖减途，可供大家理解：
在這個圖中酣藻，瀏覽器第一次向某個資源發(fā)起請求時，服務(wù)器會向瀏覽器發(fā)送該資源鳍置，當(dāng)瀏覽器再次對該資源進(jìn)行請求時杂靶，服務(wù)器向瀏覽器響應(yīng) 304蝴悉，瀏覽器收到 304 的響應(yīng)后就知道這個資源應(yīng)該從緩存中讀取了挠蛉。這就是瀏覽器緩存的一個大概流程咆贬。
緩存類型
緩存類型有兩種：強(qiáng)緩存和協(xié)商緩存。具體采用哪種緩存是根據(jù)瀏覽器第一次請求資源時服務(wù)器返回的響應(yīng)頭來確定的辟拷。
強(qiáng)緩存
強(qiáng)緩存也叫本地緩存撞羽，或強(qiáng)緩。當(dāng)某個資源應(yīng)用了強(qiáng)緩存時衫冻，瀏覽器會將資源保存在本地放吩，下一次再次請求時，無需向服務(wù)器發(fā)送請求羽杰，直接使用本地的緩存資源。
瀏覽器在讀取強(qiáng)緩存的資源時到推，可以選擇從內(nèi)存中讀瓤既（from memeory cache）或從硬盤中讀取（from disk cache）莉测，具體采用哪種方式颜骤，由瀏覽器自行決定，不同的瀏覽器可能有差異捣卤。
服務(wù)器返回下列的 HTTP 響應(yīng)頭便可讓瀏覽器開啟強(qiáng)緩存：
1.Expires
該響應(yīng)頭用來設(shè)置緩存資源的過期時間忍抽。這是 HTTP 1.0 的內(nèi)容，瀏覽器在請求資源時董朝，服務(wù)器在響應(yīng)頭中攜帶該參數(shù)便可以設(shè)置該資源的過期時間鸠项，這個過期時間是一個絕對的時間值（如 2017年12月8日），在過期時間之內(nèi)子姜，瀏覽器會從本地直接緩存讀取資源祟绊。
2.Cache-Control:Max-Age=Number
和 Expires 類似，該響應(yīng)頭也是用來描述緩存資源的過期時間哥捕，和 Expires 不同的是牧抽，這個過期時間是一個相對值，表示在某個時間段內(nèi)有效（如 1天內(nèi)有效）遥赚。在重復(fù)請求該資源時扬舒，會根據(jù)當(dāng)前時間的時間戳和第一次請求到該資源時的時間戳的差值，和 Max-Age 的值進(jìn)行對比以判斷資源是否過期凫佛， 再決定是從本地緩存中讀取資源還是向服務(wù)器重新發(fā)起請求讲坎。
協(xié)商緩存
前面說到孕惜，緩存是有過期時間的，當(dāng)某個資源的緩存過期時衣赶，就會再次向服務(wù)器發(fā)起請求诊赊，但這個請求一定會讓服務(wù)器重新返回一份資源嗎？并不一定是這樣府瞄，瀏覽器是需要分條件進(jìn)行操作的：
- 如果該資源沒有緩存協(xié)商碧磅，會直接向服務(wù)器重新請求一份
- 如果該資源有緩存協(xié)商，瀏覽器會先和服務(wù)器進(jìn)行協(xié)商遵馆，再決定使用本地的資源還是重新向服務(wù)器請求
為什么需要緩存協(xié)商呢鲸郊？這是因為某些緩存資源即使在過期時間到期之后，資源的內(nèi)容仍沒有發(fā)生變化货邓，這種情況下是沒有必要再次向服務(wù)器請求該資源的秆撮，直接使用本地的緩存就可以了。
在第一次請求資源時换况，服務(wù)器可以在響應(yīng)頭中攜帶 Etag 或者 Last-Modified职辨，表示該資源是可以進(jìn)行緩存協(xié)商的，如果在響應(yīng)某個資源時帶上了這兩個頭中的任意一個戈二，當(dāng)該資源過期以后舒裤，瀏覽器會首先詢問服務(wù)器該資源是否需要更新，再進(jìn)行后續(xù)的操作觉吭。
對于 Etag 和 Last-Modified腾供，它們代表了兩種不同的緩存策略，分別是 Etag/If-None-Match 策略和 Last-Modified/If-Modified-Since 策略鲜滩。這兩個策略在后面進(jìn)行介紹伴鳖。
總結(jié)一下，在瀏覽器第一次請求資源時徙硅，除了獲取資源本身榜聂，還從響應(yīng)頭中獲取了一些緩存相關(guān)的信息，在資源過期時闷游，會根據(jù)這些緩存相關(guān)的信息進(jìn)行操作峻汉。
下面是瀏覽器第一次請求資源時的一個流程圖：
緩存策略
前面在說緩存類型的時候，提到了 Etag/If-None-Match 和 Modified/If-Modified-Since 這兩種緩存策略脐往，它們都是協(xié)商緩存上的策略休吠。
Etag/If-None-Match
Etag 是 Entity tag 的簡寫，可以將其看作資源的一個唯一標(biāo)識业簿，當(dāng)資源的內(nèi)容發(fā)生變化時瘤礁，這個唯一標(biāo)識就改變了，如果資源的內(nèi)容一直不變梅尤，這個唯一標(biāo)識也就不變柜思。
瀏覽器第一次請求資源時岩调，服務(wù)器可以在響應(yīng)頭中帶上 Etag，其值就是該資源的唯一標(biāo)識符赡盘。當(dāng)資源過期時号枕，因為有了 Etag，瀏覽器不會直接請求資源陨享，而是會和服務(wù)器進(jìn)行緩存協(xié)商葱淳。瀏覽器會在請求頭中帶上 If-None-Match，其值就是第一次請求該資源是服務(wù)器返回的資源唯一標(biāo)識符抛姑。服務(wù)器收到請求后赞厕，會根據(jù)請求頭中的 If-None-Match 攜帶的唯一標(biāo)識符和服務(wù)器上的資源唯一標(biāo)識符進(jìn)行對比，如果資源沒有發(fā)生改變定硝，服務(wù)器返回 304皿桑，瀏覽器直接從本地緩存中讀取。如果資源發(fā)生改變了蔬啡，服務(wù)器會返回 200诲侮，瀏覽器重新請求該資源。
Modified/If-Modified-Since
同 Etag/If-None-Match 策略箱蟆，Modified/If-Modified-Since 也是根據(jù)資源是否發(fā)生變化來告訴瀏覽器是使用本地緩存還是重新向服務(wù)器請求浆西，和 Etag/If-None-Match 策略不同的是，Modified/If-Modified-Since 策略著眼點不在于文件的內(nèi)容而是文件的修改時間顽腾。在第一次請求資源時，服務(wù)器會在響應(yīng)頭中攜帶 Modified诺核，其值是最后一次修改的時間抄肖，當(dāng)資源過期時，瀏覽器會和服務(wù)器進(jìn)行緩存協(xié)商窖杀，瀏覽器在請求頭中攜帶 If-Modified-Since漓摩，其值是第一次請求資源時從響應(yīng)中獲取的 Modified 值，服務(wù)器拿到請求頭中的 If-Modified-Since 后入客，根據(jù)資源是否被修改再決定向瀏覽器返回 304 或者 200管毙。
Etag/If-None-Match 的優(yōu)勢
現(xiàn)在常用的協(xié)商緩存策略是 Etag/If-None-Match 策略，那么 Etag/If-None-Match 策略相比于 Modified/If-Modified-Since 有什么優(yōu)勢呢桌硫？Etag/If-None-Match 的出現(xiàn)是為了解決 Modified/If-Modified-Since 難以解決的一些問題夭咬，網(wǎng)上有篇文章總結(jié)的很好，我直接引用過來：
- 一些文件也許會周期性的更改铆隘，但是他的內(nèi)容并不改變(僅僅改變的修改時間)卓舵，這個時候我們并不希望客戶端認(rèn)為這個文件被修改了，而重新請求膀钠。
- 某些文件修改非常頻繁掏湾，比如在秒以下的時間內(nèi)進(jìn)行修改裹虫，(比方說1s內(nèi)修改了N次)，If-Modified-Since能檢查到的粒度是s級的融击，這種修改無法判斷(或者說UNIX記錄MTIME只能精確到秒）筑公。
- 某些服務(wù)器不能精確的得到文件的最后修改時間。
這時尊浪，利用Etag能夠更加準(zhǔn)確的控制緩存匣屡，因為Etag是服務(wù)器自動生成或者由開發(fā)者生成的對應(yīng)資源在服務(wù)器端的唯一標(biāo)識符。
瀏覽器緩存機(jī)制流程
這里有一張瀏覽器緩存機(jī)制的流程圖际长，描述了瀏覽器在處理緩存資源的整個流程：
這個圖主要的內(nèi)容還是在緩存策略這一塊耸采，可以對比前面的知識進(jìn)行理解。
附：參考資料
http協(xié)商緩存VS強(qiáng)緩存
HTTP ETag
HTTP 緩存
完工育。
