之前的文章《深入解析vue中路由切換白屏的問題（附代碼）》中，給大家了解了vue中路由切換白屏的問題。下面本篇文章給大家了解HTTP緩存機(jī)制詳解，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所助。

Web緩存大致可以分為：數(shù)據(jù)庫緩存、服務(wù)器端緩存（代理服務(wù)器緩存、CDN緩存）、瀏覽器緩存。

瀏覽器緩存也包含很多內(nèi)容：HTTP緩存、indexDB、cookie、localstorage等等。 這里要說的是http緩存。

使用緩存的好處

• 減少了冗余的數(shù)據(jù)傳輸

• 緩解了網(wǎng)絡(luò)瓶頸的問題

• 降低了對原始服務(wù)器的要求

• 降低了距離時延

術(shù)語

緩存命中率：從緩存中得到數(shù)據(jù)的請求數(shù)與所有請求數(shù)的比率。理想狀態(tài)是越高越好。

過期內(nèi)容：超過設(shè)置的有效時間，被標(biāo)記為“陳舊”的內(nèi)容。通常過期內(nèi)容不能用于回復(fù)客戶端的請求，必須重新向源服務(wù)器請求新的內(nèi)容或者驗(yàn)證緩存的內(nèi)容是否仍然準(zhǔn)備。

驗(yàn)證：驗(yàn)證緩存中的過期內(nèi)容是否仍然有效，驗(yàn)證通過的話刷新過期時間。

失效：失效就是把內(nèi)容從緩存中移除。當(dāng)內(nèi)容發(fā)生改變時就必須移除失效的內(nèi)容。

機(jī)制

策略

1）緩存存儲策略

緩存存儲策略決定了客戶端是否應(yīng)該存儲http的response。與緩存存儲有關(guān)的http header主要為response header中的Cache-Control。該header有下面幾個對應(yīng)的值：Public、Private、no-cache、max-age、no-store。除了no-store，其它幾種都會表明response應(yīng)該被客戶端緩存。

通過Cache-Control：Public設(shè)置我們可以將HTTP響應(yīng)數(shù)據(jù)存儲到本地，但此時并不意味著后續(xù)瀏覽器會直接從緩存中讀取數(shù)據(jù)并使用， 因?yàn)樗鼰o法確定本地緩存的數(shù)據(jù)是否可用（可能已經(jīng)失效），需通過緩存過期策略來判斷

2）緩存過期策略

緩存過期策略決定了客戶端存儲在本地的緩存數(shù)據(jù)是否已過期，如未過期則可以直接使用本地存儲的數(shù)據(jù)，否則就需要發(fā)請求到服務(wù)端嘗試重新獲取數(shù)據(jù)。 與緩存過期策略有關(guān)的http header 為Expires。

Expires表示緩存數(shù)據(jù)有效的絕對時間，告訴客戶端到了這個時間點(diǎn)后本地緩存就失效了，在這個時間內(nèi)客戶端可以不請求服務(wù)器而直接從本地緩存中使用已存儲的結(jié)果。

需要注意的是:no-cache和max-age=xxx的優(yōu)先級高于Expires，當(dāng)它們同時存在的時候，后者會被覆蓋掉。其次， 緩存數(shù)據(jù)過期只是告訴客戶端不能再直接從本地讀取緩存了，而是需要再發(fā)一次請求到服務(wù)器去確認(rèn)。具體什么情況下本地存儲的數(shù)據(jù)還可以繼續(xù)使用就與緩存對比策略有關(guān)了。

3）緩存對比策略

將緩存在客戶端的數(shù)據(jù)標(biāo)識發(fā)往服務(wù)端，服務(wù)端通過標(biāo)識來判斷客戶端緩存數(shù)據(jù)是否仍有效，進(jìn)而決定是否要重發(fā)數(shù)據(jù)?？蛻舳藱z測到數(shù)據(jù)過期或?yàn)g覽器刷新后，會重新發(fā)起一個 http 請求到服務(wù)器，服務(wù)器此時并不急于返回數(shù)據(jù)，而是看請求頭有沒有帶標(biāo)識（If-Modified-Since、If-None-Match）過來，如果判斷標(biāo)識仍然有效，則返回304告訴客戶端取本地緩存數(shù)據(jù)來用即可（這里要注意的是你必須要在首次響應(yīng)時輸出相應(yīng)的頭信息（Last-Modified、ETags）到客戶端）。 本地緩存數(shù)據(jù)即使被認(rèn)為過期，并不等于數(shù)據(jù)從此就沒用了。

緩存過期取值

存儲策略里面no-cache等同于max-age=0，假如服務(wù)端返回的響應(yīng)中沒有指明max-age、no-cache或Expires時，客戶端是否會緩存 http response呢 ？通過Fiddler、Charles等抓包工具可以發(fā)現(xiàn)，客戶端一樣會進(jìn)行緩存

其取值值為響應(yīng)頭中的Date與Last-Modified之間的差值的10%作為緩存有效時間

在Fiddler的Caching面板中可以看到

HTTP/1.1 Cache-Control Header is present: private HTTP Last-Modified Header is present: Tue, 08 Nov 2016 06:59:00 GMT No explicit HTTP Cache Lifetime information was provided. Heuristic expiration policies suggest defaulting to: 10% of the delta between Last-Modified and Date. That's '05:15:02' so this response will heuristically expire 2016/11/11 0:46:01.

用一副圖來表示

緩存的控制

1）強(qiáng)制緩存

可以通過Expires，Cache-Control來設(shè)定，Expires指緩存過期的時間，超過了這個時間點(diǎn)就代表資源過期。有一個問題是由于使用具體時間，如果時間表示出錯或者沒有轉(zhuǎn)換到正確的時區(qū)都可能造成緩存生命周期出錯。 并且Expires是HTTP/1.0的標(biāo)準(zhǔn)，現(xiàn)在更傾向于用HTTP/1.1中定義的Cache-Control。兩個同時存在時也是Cache-Control的優(yōu)先級更高。

2）協(xié)商緩存

緩存的資源到期了，并不意味著資源內(nèi)容發(fā)生了改變，如果和服務(wù)器上的資源沒有差異，實(shí)際上沒有必要再次請求?？蛻舳撕头?wù)器端通過某種驗(yàn)證機(jī)制驗(yàn)證當(dāng)前請求資源是否可以使用緩存。 瀏覽器第一次請求數(shù)據(jù)之后會將數(shù)據(jù)和響應(yīng)頭部的緩存標(biāo)識存儲起來。再次請求時會帶上存儲的頭部字段，服務(wù)器端驗(yàn)證是否可用。如果返回304 Not Modified，代表資源沒有發(fā)生改變可以使用緩存的數(shù)據(jù)，獲取新的過期時間。反之返回200就相當(dāng)于重新請求了一遍資源并替換舊資源。

Last-modified/If-Modified-Since

Last-modified: 服務(wù)器端資源的最后修改時間，響應(yīng)頭部會帶上這個標(biāo)識。第一次請求之后，瀏覽器記錄這個時間，再次請求時，請求頭部帶上If-Modified-Since即為之前記錄下的時間。服務(wù)器端收到帶If-Modified-Since的請求后會去和資源的最后修改時間對比。若修改過就返回最新資源，狀態(tài)碼200，若沒有修改過則返回304。

Etag/If-None-Match

由服務(wù)器端上生成的一段hash字符串，第一次請求時響應(yīng)頭帶上ETag: abcd，之后的請求中帶上If-None-Match: abcd，服務(wù)器檢查ETag，返回304或200。

關(guān)于 last-modified 和 Etag 區(qū)別

• 某些服務(wù)器不能精確得到資源的最后修改時間，這樣就無法通過最后修改時間判斷資源是否更新。

• Last-modified只能精確到秒。

• 一些資源的最后修改時間改變了，但是內(nèi)容沒改變，使用Last-modified看不出內(nèi)容沒有改變。

• Etag的精度比Last-modified高，屬于強(qiáng)驗(yàn)證，要求資源字節(jié)級別的一致，優(yōu)先級高。如果服務(wù)器端有提供ETag的話，必須先對ETag進(jìn)行Conditional Request。

注意：實(shí)際使用ETag/Last-modified要注意保持一致性，做負(fù)載均衡和反向代理的話可能會出現(xiàn)不一致的情況。計算ETag也是需要占用資源的，如果修改不是過于頻繁，看自己的需求用Cache-Control是否可以滿足。

實(shí)際應(yīng)用

首先要明確哪些內(nèi)容適合被緩存哪些不適合。

考慮緩存的內(nèi)容：css樣式文件，js文件，logo、圖標(biāo)，html文件，可以下載的內(nèi)容一些不應(yīng)該被緩存的內(nèi)容：業(yè)務(wù)敏感的GET請求

可緩存的內(nèi)容又分為幾種不同的情況：

不經(jīng)常改變的文件：給max-age設(shè)置一個較大的值，一般設(shè)置max-age=31536000比如引入的一些第三方文件、打包出來的帶有hash后綴css、js文件。一般來說文件內(nèi)容改變了，會更新版本號、hash值，相當(dāng)于請求另一個文件。 標(biāo)準(zhǔn)中規(guī)定max-age的值最大不超過一年，所以設(shè)成max-age=31536000。至于過期內(nèi)容，緩存區(qū)會將一段時間沒有使用的文件刪除掉。

[完]

推薦學(xué)習(xí)：Html5視頻教程