以前項(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)稱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)首部字段

request緩存相關(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

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

① 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)建此字段

實(shí)體首部緩存相關(guān)字段

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ù)器，判斷資源是否更新。