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

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

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

使用緩存的好處

• 減少了冗余的數據傳輸

• 緩解了網絡瓶頸的問題

• 降低了對原始服務器的要求

• 降低了距離時延

術語

緩存命中率：從緩存中得到數據的請求數與所有請求數的比率。理想狀態是越高越好。

過期內容：超過設置的有效時間，被標記為“陳舊”的內容。通常過期內容不能用于回復客戶端的請求，必須重新向源服務器請求新的內容或者驗證緩存的內容是否仍然準備。

驗證：驗證緩存中的過期內容是否仍然有效，驗證通過的話刷新過期時間。

失效：失效就是把內容從緩存中移除。當內容發生改變時就必須移除失效的內容。

機制

策略

1）緩存存儲策略

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

通過Cache-Control：Public設置我們可以將HTTP響應數據存儲到本地，但此時并不意味著后續瀏覽器會直接從緩存中讀取數據并使用， 因為它無法確定本地緩存的數據是否可用（可能已經失效），需通過緩存過期策略來判斷

2）緩存過期策略

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

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

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

3）緩存對比策略

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

緩存過期取值

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

其取值值為響應頭中的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）強制緩存

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

2）協商緩存

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

Last-modified/If-Modified-Since

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

Etag/If-None-Match

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

關于 last-modified 和 Etag 區別

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

• Last-modified只能精確到秒。

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

• Etag的精度比Last-modified高，屬于強驗證，要求資源字節級別的一致，優先級高。如果服務器端有提供ETag的話，必須先對ETag進行Conditional Request。

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

實際應用

首先要明確哪些內容適合被緩存哪些不適合。

考慮緩存的內容：css樣式文件，js文件，logo、圖標，html文件，可以下載的內容一些不應該被緩存的內容：業務敏感的GET請求

可緩存的內容又分為幾種不同的情況：

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

[完]

推薦學習：Html5視頻教程