http可以說(shuō)是現(xiàn)在前端領(lǐng)域（甚至整個(gè)互聯(lián)網(wǎng)）發(fā)展過(guò)程中使用最多的一個(gè)應(yīng)用層協(xié)議。其傳輸層一般都是使用tcp協(xié)議來(lái)保證可靠傳輸?shù)?，由于tcp3次握手以及4次揮手的鏈接建立與斷開(kāi)機(jī)制，導(dǎo)致每一次進(jìn)行http請(qǐng)求所消耗的網(wǎng)絡(luò)資源相對(duì)較大。。所以減少請(qǐng)求次數(shù)，合理的數(shù)據(jù)緩存成為互聯(lián)網(wǎng)開(kāi)發(fā)的重中之重??！

尤其在前端領(lǐng)域，http緩存在加快網(wǎng)頁(yè)性能和為用戶(hù)節(jié)約網(wǎng)絡(luò)資源。作為一名小前端，又恰好面試的時(shí)候又被問(wèn)蒙蔽了。。就在這里對(duì)http緩存機(jī)制進(jìn)行一個(gè)小小的總結(jié)吧~~

總的來(lái)說(shuō)，瀏覽器要從服務(wù)器上面真正的拿到數(shù)據(jù)還要通過(guò)下面幾關(guān)：

Cache-Control

Cache-control是http響應(yīng)頭的一個(gè)字段。就是用來(lái)與客戶(hù)端約定響應(yīng)的數(shù)據(jù)的緩存的有效時(shí)間。

Cache-Control在Response頭中

在上圖中可以發(fā)現(xiàn)Cache-Control有一個(gè)max-age=691200的參數(shù)。這個(gè)就是表示該資源的最大生存時(shí)間為691200秒。在這個(gè)時(shí)間過(guò)后才會(huì)再次向服務(wù)器發(fā)出請(qǐng)求申請(qǐng)新的資源，否則直接使用本地資源。不過(guò)，就算生存時(shí)間過(guò)了，服務(wù)器不會(huì)這么溫順地給你發(fā)新的資源（你說(shuō)發(fā)就發(fā)豈不是很丟臉？？？），還會(huì)進(jìn)一步的進(jìn)行判斷，是否應(yīng)該發(fā)送新的資源（看到后面就知道啦~）

除了max-age之外，Cache-Control還有別的參數(shù)可以選擇：

1. public：所有內(nèi)容都將被緩存(客戶(hù)端和代理服務(wù)器都可緩存)
2. private：內(nèi)容只緩存到私有緩存中(僅客戶(hù)端可以緩存，代理服務(wù)器不可緩存)；
3. no-cache： 表示必須先與服務(wù)器確認(rèn)返回的響應(yīng)是否被更改，然后才能使用該響應(yīng)來(lái)滿(mǎn)足后續(xù)對(duì)同一個(gè)網(wǎng)址的請(qǐng)求。因此，如果存在合適的驗(yàn)證令牌 (ETag)，no-cache 會(huì)發(fā)起往返通信來(lái)驗(yàn)證緩存的響應(yīng)，如果資源未被更改，可以避免下載；
4. no-store： 表示所有內(nèi)容都不會(huì)被緩存到緩存或 Internet 臨時(shí)文件中；
5. max-age：就是我上面說(shuō)的那個(gè)了（記住是秒為單位，這個(gè)最常用）~
6. min-fresh：表示客戶(hù)端可以接收響應(yīng)時(shí)間小于當(dāng)前時(shí)間加上指定時(shí)間的響應(yīng)；
7. max-stale：表示客戶(hù)端可以接受超出超時(shí)期間的響應(yīng)消息。如果指定max-stale消息的值，那么客戶(hù)端可以接收超出超時(shí)期指定值之內(nèi)的響應(yīng)消息。

另外，瀏覽器的不同行為例如enter f5也會(huì)有不同的表現(xiàn)哦。（這個(gè)后面再總結(jié)吧~）

更多的介紹可以看看下面百科和幾位老哥的總結(jié)：

百度百科：http://baike.baidu.com/link?url=pJ9rIXuRJycpHnwWae0NN_6Gl9wEOJTtp9753YOhHMMe5J1KauV3oLDQoFnTfgBej6JqH_ZBkKfVm7CK8VBLQVqr1jP3ckkjQC2jhZQ0Xbu
相關(guān)博客：http://blog.csdn.net/adparking/article/details/6673454
相關(guān)博客：https://my.oschina.net/mickelfeng/blog/103180

眼尖的盆友，可能會(huì)發(fā)現(xiàn) 上面的圖中還有一個(gè)Expires字段，有些還有Pragma，其實(shí)這兩個(gè)都是個(gè)http1.0的舊產(chǎn)物，跟Cache-Control設(shè)置max-age是一個(gè)意思。由于Cache-Control是http1.1提出的，而且在http1.1甚至http2.0大行其道的今日，這兩個(gè)東西已經(jīng)沒(méi)有作用了。當(dāng)Cache-Control和上面兩個(gè)東西同時(shí)在http頭中存在時(shí)，優(yōu)先使用Cache-Control。

注意：瀏覽器要發(fā)出請(qǐng)求必須要先在max-age時(shí)間過(guò)后（可以用ctrl+F5，來(lái)跳過(guò)這個(gè)檢查）。如果在一個(gè)時(shí)間內(nèi)在發(fā)出請(qǐng)求，chrome的network會(huì)返回一個(gè)假200（其實(shí)是讀緩存的假請(qǐng)求2333333）。

假200。。。

媽蛋！假請(qǐng)求頭

一句話(huà)總結(jié)：Cache-Control是一個(gè)用于控制（告訴）客戶(hù)端，該響應(yīng)的資源應(yīng)該存哪里，存多久。

時(shí)間的維度上檢查文件是否被修改

當(dāng)瀏覽器發(fā)現(xiàn)max-age（或其他）時(shí)間過(guò)后，瀏覽器就開(kāi)始向服務(wù)器請(qǐng)求獲取新的資源。但是服務(wù)器并不會(huì)輕易的把新的資源返回給客戶(hù)端。

當(dāng)瀏覽器第一次訪問(wèn)某個(gè)網(wǎng)站，請(qǐng)求服務(wù)器時(shí)，服務(wù)器在返回的http響應(yīng)頭中加入Last-Modified字段，故名思意表示該資源最后一次修改是在某一個(gè)時(shí)間，如下圖

Last-Modified

瀏覽器在收到了Last-Modified后，在以后的每一次請(qǐng)求中（請(qǐng)求頭）都會(huì)帶上一個(gè)字段If-Modified-Since，這個(gè)字段的值就是上一次收到的Last-Modified的值。

If-Modified-Since

服務(wù)器端則根據(jù)查看該資源是否在這個(gè)時(shí)間點(diǎn)后被修改過(guò)?。如果沒(méi)有被修改過(guò)，則服務(wù)器會(huì)返回304，表示資源未被修改過(guò)，使用緩存就可以了。否則如果有Etag則進(jìn)行下一步判斷（后面說(shuō)），沒(méi)有則200返回新資源。

Last-Modified 表面上非?？孔V，但是也存在一種情況，如果在服務(wù)器上，一個(gè)資源被修改了，但其實(shí)際內(nèi)容根本沒(méi)發(fā)生改變，會(huì)因?yàn)長(zhǎng)ast-Modified時(shí)間匹配不上而返回了整個(gè)實(shí)體給客戶(hù)端（即使客戶(hù)端緩存里有個(gè)一模一樣的資源）。

資源內(nèi)容是否被修改

ETag是http1.1中為了解決上面問(wèn)題的一個(gè)http字段（一般是在響應(yīng)頭里面的）。這個(gè)ETag的值的什么呢？一般是由服務(wù)器根據(jù)資源的內(nèi)容通過(guò)md5（或者其他）計(jì)算出的一個(gè)唯一標(biāo)志。ok，瀏覽器得到這個(gè)東西之后，每次請(qǐng)求該資源的時(shí)候就會(huì)帶上這個(gè)值，這個(gè)值是放在請(qǐng)求頭的if-None-Match中，表示如果不匹配就給我新的吧，匹配就返回304~~

還有這個(gè)if-Match，這個(gè)我就不是很理解到底是什么意思了。。。知道的朋友可以告訴我一下。。。
什么是412錯(cuò)誤，先決條件失敗是什么意思。。

總結(jié)

最后盜個(gè)圖：

瀏覽器緩存判斷流程

另外，瀏覽器有多個(gè)刷新頁(yè)面的方法，下面來(lái)看看對(duì)緩存來(lái)說(shuō)都有什么區(qū)別吧（用chrome來(lái)測(cè)試，據(jù)說(shuō)不同瀏覽器不同哦~）：

1. 地址欄輸入地址+enter

地址欄輸入地址+enter

從上面圖中可以看出，這種形式的刷新頁(yè)面，是會(huì)判斷過(guò)期的（max-age）。。就是說(shuō)是按整個(gè)緩存流程走下去。。

2. F5刷新頁(yè)面

F5刷新頁(yè)面

哇 好多304。。說(shuō)明F5刷新頁(yè)面跳過(guò)了過(guò)期判斷（包括了max-age、expire等等），直接從ETage開(kāi)始。。

3. ctrl+F5（或者network勾選Disable cache）

ctrl+F5

ctrl+F5請(qǐng)求頭

全部200?。≌f(shuō)明 這個(gè)是真·強(qiáng)刷·無(wú)雙??！從請(qǐng)求頭的圖中，可以看到瀏覽器是同配置Cache-Control: no-cache來(lái)叫服務(wù)器重發(fā)請(qǐng)求的！~

第一次寫(xiě)博客，各位老哥，給個(gè)面子，有錯(cuò)就提出來(lái)哈~~

哈哈哈哈

by the offer, of the offer, for the offer??！~~~

相關(guān)參考：

淺談瀏覽器http的緩存機(jī)制: http://www.cnblogs.com/vajoy/p/5341664.html
http狀態(tài)碼：http://www.cnblogs.com/DeasonGuan/articles/Hanami.html
瀏覽器行為對(duì)緩存影響：http://www.iefans.net/liulanqi-shuaxin-huancun-jizhi/