http緩存完整版

http 緩存分爲強緩存，協商緩存

強緩存

強緩存表示直接使用緩存中的資源，不發請求，主要值有 Expires 和 Cache-Control

表現爲請求狀態碼 200，size: (memory cache / disk cache)

memory cache：資源在內存中，讀取時間幾乎爲 0，關閉頁面時資源釋放，下次打開若是再次命中強緩存就是 disk cache

disk cache：資源在磁盤中，毫秒級讀取時間

協商緩存

若是未能從強緩存中讀取資源，則發送請求到服務器，判斷協商緩存（Last-Modified/If-Modified-Since ，ETag/If-None-Match）

協商緩存命中返回 304，不下載資源，使用緩存資源

協商緩存未命中返回 200，下載資源，更新緩存

下面經過實際場景講解各類緩存方式

1. 瀏覽器須要請求資源，每次從服務器獲取資源，下載解析後使用

   缺點：每次請求浪費流量，時間

2. 瀏覽器緩存資源，每次請求使用緩存資源

   缺點：資源更新後瀏覽器沒法感知使用最新資源

3. 約定過時時間 Exipres

   response header 中返回，值爲 GMT 格式的標準時間(Fri, 23 Aug 2019 06:04:42 GMT)，表示文件過時時間

   在過時時間內，直接使用緩存中資源

   缺點：客戶端時間能夠任意修改

4. 約定相對過時時間 Cache-Contorl

   Cache-Contorl: max-age=10 (秒)

   過時後須要從新下載資源並重置過時時間

以上爲強緩存，缺點爲過時後須要從新下載資源，不管資源有沒有更新

5. 服務器告知文件上次修改時間 Last-Modified

   第一次請求文件時返回 Last-Modified（GMT 時間） 強緩存失效時，request header 帶上 If-Modified-Since（等於上一次請求的 Last-Modified）

   服務器比較文件修改時間和 If-Modified-Since，若是文件未修改則返回 304，瀏覽器不下載資源並直接使用緩存資源，若是修改過則返回 200，下載資源並更新 Last-Modified

   缺點：精確到秒

6. 文件內容對比 Etag 第一次請求文件時返回 Etag（GMT 時間）

   強緩存失效時，request header 帶上 If-None-Match（等於上一次請求的 Etag）

   服務器比較文件 Etag 和 If-None-Match，若是文件未修改則返回 304，瀏覽器不下載資源並直接使用緩存資源，若是修改過則返回 200，下

   載資源並更新 Etag

tips

1. 若是在 Cache-Control 響應頭設置了 "max-age" 或者 "s-max-age" 指令，那麼 Expires 頭會被忽略

2. Cache-Control: no-cache 表示不啓用強緩存，Cache-Control: no-store 禁止使用緩存

3. 若是同時使用 Etag 和 Last-Modified，那須要都知足條件

4. Ctrl + F5 / Cammand + Shift + r 會忽略強緩存，使用協商緩存驗證資源

5. 通常狀況設置 html 不緩存，以及時相應更新

6. 實測 firefox 只使用協商緩存，忽略強緩存；chrome 中有強緩存優化，若是未明確禁止強緩存則會觸發強緩存

7. Pragma: no-cache，http1.0 標準，全部瀏覽器支持

   Cache-Control 不存在的時候，它的行爲與 Cache-Control: no-cache 一致，表示需跟服務器驗證緩存（使用協商緩存） 基本廢棄了，建議只在須要兼容 HTTP/1.0 客戶端的場合下應用。

參考：

1. 面試精選之 http 緩存
2. [前端詞典]F5 同 Ctrl+F5 的區別你可瞭解