[[286857]]

前言

緩存機(jī)制無(wú)處不在，有客戶端緩存，服務(wù)端緩存，代理服務(wù)器緩存等。在HTTP中具有緩存功能的是瀏覽器緩存。 HTTP緩存作為web性能優(yōu)化的重要手段，對(duì)于從事web開(kāi)發(fā)的朋友有重要的意義。本文將圍繞以下幾個(gè)方面來(lái)整理HTTP緩存：

• 緩存的規(guī)則
• 緩存的方案
• 緩存的優(yōu)點(diǎn)
• 不同刷新的請(qǐng)求執(zhí)行過(guò)程

緩存的規(guī)則

我們知道HTTP的緩存屬于客戶端緩存，后面會(huì)提到為什么屬于客戶端緩存。所以我們認(rèn)為瀏覽器存在一個(gè)緩存數(shù)據(jù)庫(kù)，用于儲(chǔ)存一些不經(jīng)常變化的靜態(tài)文件(圖片、css、js等)。我們將緩存分為強(qiáng)制緩存和協(xié)商緩存。下面我將分別詳細(xì)的介紹這兩種緩存的緩存規(guī)則。

強(qiáng)制緩存

當(dāng)緩存數(shù)據(jù)庫(kù)中已有所請(qǐng)求的數(shù)據(jù)時(shí)?？蛻舳酥苯訌木彺鏀?shù)據(jù)庫(kù)中獲取數(shù)據(jù)。當(dāng)緩存數(shù)據(jù)庫(kù)中沒(méi)有所請(qǐng)求的數(shù)據(jù)時(shí)，客戶端的才會(huì)從服務(wù)端獲取數(shù)據(jù)。

協(xié)商緩存

又稱對(duì)比緩存，客戶端會(huì)先從緩存數(shù)據(jù)庫(kù)中獲取到一個(gè)緩存數(shù)據(jù)的標(biāo)識(shí)，得到標(biāo)識(shí)后請(qǐng)求服務(wù)端驗(yàn)證是否失效(新鮮)，如果沒(méi)有失效服務(wù)端會(huì)返回304，此時(shí)客戶端直接從緩存中獲取所請(qǐng)求的數(shù)據(jù)，如果標(biāo)識(shí)失效，服務(wù)端會(huì)返回更新后的數(shù)據(jù)。

小貼士：

兩類(lèi)緩存機(jī)制可以同時(shí)存在，強(qiáng)制緩存的優(yōu)先級(jí)高于協(xié)商緩存，當(dāng)執(zhí)行強(qiáng)制緩存時(shí)，如若緩存命中，則直接使用緩存數(shù)據(jù)庫(kù)數(shù)據(jù)，不在進(jìn)行緩存協(xié)商。

緩存的方案

上面的內(nèi)容讓我們大概了解了緩存機(jī)制是怎樣運(yùn)行的，但是，服務(wù)器是如何判斷緩存是否失效呢?我們知道瀏覽器和服務(wù)器進(jìn)行交互的時(shí)候會(huì)發(fā)送一些請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)，我們稱之為HTTP報(bào)文。報(bào)文中包含首部header和主體部分body。與緩存相關(guān)的規(guī)則信息就包含在header中。boby中的內(nèi)容是HTTP請(qǐng)求真正要傳輸?shù)牟糠?。舉個(gè)HTTP報(bào)文header部分的例子如下：

接下來(lái)我們將對(duì)HTTP報(bào)文中出現(xiàn)的與緩存規(guī)則相關(guān)的信息做出詳細(xì)解釋。(我們依舊分為強(qiáng)制緩存和協(xié)商緩存兩個(gè)方面來(lái)介紹)

強(qiáng)制緩存

對(duì)于強(qiáng)制緩存，服務(wù)器響應(yīng)的header中會(huì)用兩個(gè)字段來(lái)表明——Expires和Cache-Control。

Expires

Exprires的值為服務(wù)端返回的數(shù)據(jù)到期時(shí)間。當(dāng)再次請(qǐng)求時(shí)的請(qǐng)求時(shí)間小于返回的此時(shí)間，則直接使用緩存數(shù)據(jù)。但由于服務(wù)端時(shí)間和客戶端時(shí)間可能有誤差，這也將導(dǎo)致緩存命中的誤差，另一方面，Expires是HTTP1.0的產(chǎn)物，故現(xiàn)在大多數(shù)使用Cache-Control替代。

Cache-Control

Cache-Control有很多屬性，不同的屬性代表的意義也不同。 private：客戶端可以緩存 public：客戶端和代理服務(wù)器都可以緩存 max-age=t：緩存內(nèi)容將在t秒后失效 no-cache：需要使用協(xié)商緩存來(lái)驗(yàn)證緩存數(shù)據(jù) no-store：所有內(nèi)容都不會(huì)緩存。

協(xié)商緩存

協(xié)商緩存需要進(jìn)行對(duì)比判斷是否可以使用緩存。瀏覽器第一次請(qǐng)求數(shù)據(jù)時(shí)，服務(wù)器會(huì)將緩存標(biāo)識(shí)與數(shù)據(jù)一起響應(yīng)給客戶端，客戶端將它們備份至緩存中。再次請(qǐng)求時(shí)，客戶端會(huì)將緩存中的標(biāo)識(shí)發(fā)送給服務(wù)器，服務(wù)器根據(jù)此標(biāo)識(shí)判斷。若未失效，返回304狀態(tài)碼，瀏覽器拿到此狀態(tài)碼就可以直接使用緩存數(shù)據(jù)了。 對(duì)于協(xié)商緩存來(lái)說(shuō)，緩存標(biāo)識(shí)我們需要著重理解一下，下面我們將著重介紹它的兩種緩存方案。

Last-Modified

Last-Modified： 服務(wù)器在響應(yīng)請(qǐng)求時(shí)，會(huì)告訴瀏覽器資源的最后修改時(shí)間。

if-Modified-Since: 瀏覽器再次請(qǐng)求服務(wù)器的時(shí)候，請(qǐng)求頭會(huì)包含此字段，后面跟著在緩存中獲得的最后修改時(shí)間。服務(wù)端收到此請(qǐng)求頭發(fā)現(xiàn)有if-Modified-Since，則與被請(qǐng)求資源的最后修改時(shí)間進(jìn)行對(duì)比，如果一致則返回304和響應(yīng)報(bào)文頭，瀏覽器只需要從緩存中獲取信息即可。 從字面上看，就是說(shuō)：從某個(gè)時(shí)間節(jié)點(diǎn)算起，是否文件被修改了

如果真的被修改：那么開(kāi)始傳輸響應(yīng)一個(gè)整體，服務(wù)器返回：200 OK

如果沒(méi)有被修改：那么只需傳輸響應(yīng)header，服務(wù)器返回：304 Not Modified

if-Unmodified-Since: 從字面上看, 就是說(shuō): 從某個(gè)時(shí)間點(diǎn)算起, 是否文件沒(méi)有被修改

如果沒(méi)有被修改:則開(kāi)始`繼續(xù)'傳送文件: 服務(wù)器返回: 200 OK

如果文件被修改:則不傳輸,服務(wù)器返回: 412 Precondition failed (預(yù)處理錯(cuò)誤)

這兩個(gè)的區(qū)別是一個(gè)是修改了才下載一個(gè)是沒(méi)修改才下載。 Last-Modified 說(shuō)好卻也不是特別好，因?yàn)槿绻诜?wù)器上，一個(gè)資源被修改了，但其實(shí)際內(nèi)容根本沒(méi)發(fā)生改變，會(huì)因?yàn)長(zhǎng)ast-Modified時(shí)間匹配不上而返回了整個(gè)實(shí)體給客戶端(即使客戶端緩存里有個(gè)一模一樣的資源)。為了解決這個(gè)問(wèn)題，HTTP1.1推出了Etag。

Etag

Etag： 服務(wù)器響應(yīng)請(qǐng)求時(shí)，通過(guò)此字段告訴瀏覽器當(dāng)前資源在服務(wù)器生成的唯一標(biāo)識(shí)(生成規(guī)則由服務(wù)器決定)

If-None-Match： 再次請(qǐng)求服務(wù)器時(shí)，瀏覽器的請(qǐng)求報(bào)文頭部會(huì)包含此字段，后面的值為在緩存中獲取的標(biāo)識(shí)。服務(wù)器接收到次報(bào)文后發(fā)現(xiàn)If-None-Match則與被請(qǐng)求資源的唯一標(biāo)識(shí)進(jìn)行對(duì)比。

不同，說(shuō)明資源被改動(dòng)過(guò)，則響應(yīng)整個(gè)資源內(nèi)容，返回狀態(tài)碼200。

相同，說(shuō)明資源無(wú)心修改，則響應(yīng)header，瀏覽器直接從緩存中獲取數(shù)據(jù)信息。返回狀態(tài)碼304.

但是實(shí)際應(yīng)用中由于Etag的計(jì)算是使用算法來(lái)得出的，而算法會(huì)占用服務(wù)端計(jì)算的資源，所有服務(wù)端的資源都是寶貴的，所以就很少使用Etag了。

緩存的優(yōu)點(diǎn)

減少了冗余的數(shù)據(jù)傳遞，節(jié)省寬帶流量

減少了服務(wù)器的負(fù)擔(dān)，大大提高了網(wǎng)站性能

加快了客戶端加載網(wǎng)頁(yè)的速度 這也正是HTTP緩存屬于客戶端緩存的原因。

不同刷新的請(qǐng)求執(zhí)行過(guò)程

瀏覽器地址欄中寫(xiě)入U(xiǎn)RL，回車(chē) 瀏覽器發(fā)現(xiàn)緩存中有這個(gè)文件了，不用繼續(xù)請(qǐng)求了，直接去緩存拿。(最快)

F5 F5就是告訴瀏覽器，別偷懶，好歹去服務(wù)器看看這個(gè)文件是否有過(guò)期了。于是瀏覽器就膽膽襟襟的發(fā)送一個(gè)請(qǐng)求帶上If-Modify-since。

Ctrl+F5 告訴瀏覽器，你先把你緩存中的這個(gè)文件給我刪了，然后再去服務(wù)器請(qǐng)求個(gè)完整的資源文件下來(lái)。于是客戶端就完成了強(qiáng)行更新的操作.