以前項(xiàng)目中遇到了很多瀏覽器緩存相關(guān)的問(wèn)題,，也在網(wǎng)上查過(guò)資料,，搞過(guò)服務(wù)器的配置，來(lái)確?？蛻舳思虞d服務(wù)器資源的速度和資源有效性,。最近仔細(xì)看了下http協(xié)議中和緩存相關(guān)的一些屬性，總結(jié)一下,。

瀏覽器緩存原理

①瀏覽器第一次訪問(wèn)服務(wù)器資源 /index.html

在瀏覽器中沒(méi)有緩存文件,，直接向服務(wù)器發(fā)送請(qǐng)求。

服務(wù)器返回 200 OK,，實(shí)體中返回 index.html文件內(nèi)容,，并設(shè)置一個(gè)緩存過(guò)期時(shí)間，一個(gè)文件修改時(shí)間,，一個(gè)根據(jù)index.html內(nèi)容計(jì)算出來(lái)的實(shí)體標(biāo)記Entity Tag,，簡(jiǎn)稱(chēng)Etag,。

瀏覽器將/index.html路徑的請(qǐng)求緩存到本地。

②瀏覽器第二次訪問(wèn)服務(wù)器資源 /index.html

由于本地已經(jīng)有了此路徑下的緩存文件,，所以這一次就不直接向服務(wù)器發(fā)送請(qǐng)求了,。

首先，進(jìn)行緩存過(guò)期判斷,。瀏覽器根據(jù)①中設(shè)置緩存過(guò)期時(shí)間判斷緩存文件是否過(guò)期,。

情景一：若沒(méi)有過(guò)期，則不向服務(wù)器發(fā)送請(qǐng)求,，直接使用緩存中的結(jié)果，此時(shí)我們?cè)跒g覽器控制臺(tái)中可以看到 200 OK(from cache) ,，此時(shí)的情況就是完全使用緩存,，瀏覽器和服務(wù)器沒(méi)有任何交互的。

情景二：若已過(guò)期,，則向服務(wù)器發(fā)送請(qǐng)求,，此時(shí)請(qǐng)求中會(huì)帶上①中設(shè)置的文件修改時(shí)間，和Etag

然后,，進(jìn)行資源更新判斷,。服務(wù)器根據(jù)瀏覽器傳過(guò)來(lái)的文件修改時(shí)間，判斷自瀏覽器上一次請(qǐng)求之后,，文件是不是沒(méi)有被修改過(guò),；根據(jù)Etag，判斷文件內(nèi)容自上一次請(qǐng)求之后,，有沒(méi)有發(fā)生變化

情形一：若兩種判斷的結(jié)論都是文件沒(méi)有被修改過(guò),，則服務(wù)器就不給瀏覽器發(fā)index.html的內(nèi)容了，直接告訴它,，文件沒(méi)有被修改過(guò),，你用你那邊的緩存吧—— 304 Not Modified，此時(shí)瀏覽器就會(huì)從本地緩存中獲取index.html的內(nèi)容,。此時(shí)的情況叫協(xié)議緩存,，瀏覽器和服務(wù)器之間有一次請(qǐng)求交互。

情形二：若修改時(shí)間和文件內(nèi)容判斷有任意一個(gè)沒(méi)有通過(guò),，則服務(wù)器會(huì)受理此次請(qǐng)求,，之后的操作同①

我的文字表達(dá)能力可能有限，為了盡量把這個(gè)流程描述清楚一點(diǎn),，下面

緩存相關(guān)首部字段

① cache-control 用來(lái)做緩存過(guò)期判斷

常用指令：

• no-cache 不直接使用緩存,，始終向服務(wù)器發(fā)起請(qǐng)求

• max-age 緩存過(guò)期時(shí)間，是一個(gè)時(shí)間數(shù)值,，比如3600秒,，設(shè)置為0的時(shí)候效果等同于no-cache

• s-maxage 給緩存代理用的指令,，對(duì)直接返回資源的server無(wú)效，當(dāng)s-maxage生效時(shí),，會(huì)忽略max-age的值

• only-if-cached 若有緩存,，則只使用緩存，若緩存文件出問(wèn)題了,，請(qǐng)求也會(huì)出問(wèn)題

② Pragma 用來(lái)做緩存過(guò)期判斷

它可以取值no-cache

這是一個(gè)http1.0遺留的字段,，當(dāng)它和cache-control同時(shí)存在的時(shí)候，會(huì)被cache-control覆蓋

③ if-match / if-none-match 用來(lái)做資源更新判斷

這個(gè)指令會(huì)把緩存中的Etag傳給服務(wù)器,，服務(wù)器用它來(lái)和服務(wù)器端的資源Etag進(jìn)行對(duì)比,，若不一致則證明資源被修改了，需要響應(yīng)請(qǐng)求為 200 OK

④ if-modified-since 用來(lái)做資源更新判斷

這個(gè)指令會(huì)把文件的上一次緩存中的文件的更新時(shí)間傳給服務(wù)器,，服務(wù)器判斷文件在這個(gè)時(shí)間點(diǎn)后是否被修改,，如果被修改過(guò)則需要響應(yīng)請(qǐng)求為200 OK

① cache-control 用來(lái)設(shè)置緩存過(guò)期時(shí)間

常用指令：

• no-cache 讓客戶端不直接使用緩存，始終向服務(wù)器發(fā)起請(qǐng)求,，不設(shè)置默認(rèn)是這個(gè),，上邊截圖中的請(qǐng)求就是省略了，所以客戶端不會(huì)直接使用緩存,。

• max-age 緩存過(guò)期時(shí)間,，是一個(gè)時(shí)間數(shù)值，比如3600秒,，設(shè)置為0的時(shí)候效果等同于no-cache

• s-maxage 給緩存代理用的指令,，對(duì)直接返回資源的server無(wú)效，當(dāng)s-maxage生效時(shí),，會(huì)忽略max-age的值

• private/public 默認(rèn)是private,，只在一個(gè)瀏覽器中緩存，設(shè)置為public時(shí)緩存可被多個(gè)用戶共享

② Etag 用來(lái)設(shè)置根據(jù)資源內(nèi)容生成的實(shí)體標(biāo)簽

這個(gè)值有強(qiáng)tag和弱tag,，區(qū)別是計(jì)算方式不同,，只有強(qiáng)tag才會(huì)在資源被更新的時(shí)候立即發(fā)生變化，請(qǐng)求首部中的if-match/if-none-match字段就會(huì)傳回這個(gè)值給服務(wù)端

③ age

這個(gè)字段用來(lái)告訴客戶端,，這個(gè)response是在多久前被創(chuàng)建的,，單位為秒，緩存服務(wù)器返回資源的時(shí)候必須創(chuàng)建此字段

response的head里邊可能還包括實(shí)體首部,，實(shí)體首部是緊跟在response首部后邊的,。

①last-modified-time ——用來(lái)設(shè)置資源最后修改時(shí)間

②Exprire —— 設(shè)置文件過(guò)期時(shí)間

這個(gè)字段的作用和cache-control相同，不同的是它直接指定一個(gè)緩存過(guò)期時(shí)間點(diǎn),，容易受客戶端時(shí)間的影響,。

這也是一個(gè)遺留的字段，和cache-control同時(shí)存在的時(shí)候會(huì)被后者覆蓋

緩存配置的一些注意事項(xiàng)

① 只有g(shù)et請(qǐng)求會(huì)被緩存，post請(qǐng)求不會(huì)

② Etag 在資源分布在多臺(tái)機(jī)器上時(shí),，對(duì)于同一個(gè)資源,，不同服務(wù)器生成的Etag可能不相同，此時(shí)就會(huì)導(dǎo)致304協(xié)議緩存失效,，客戶端還是直接從server取資源,。可以自己修改服務(wù)器端etag的生成方式,，根據(jù)資源內(nèi)容生成同樣的etag,。

③ 系統(tǒng)上線，更新資源時(shí),，可以在資源uri后邊附上資源修改時(shí)間,、svn版本號(hào)、文件md5 等信息,，這樣可以避免用戶下載到緩存的舊的文件

④ 觀察chrome的表現(xiàn)發(fā)現(xiàn),，通過(guò)鏈接或者地址欄訪問(wèn)，會(huì)先判斷緩存是否過(guò)期,，再判斷緩資源是否更新；F5刷新,，會(huì)跳過(guò)緩存過(guò)期判斷,，直接請(qǐng)求服務(wù)器，判斷資源是否更新,。

目前只能回憶起這些了,，以后遇到了再補(bǔ)充吧~