強緩存和協商緩存詳情 - 前端,瀏覽器,瀏覽器原理,網絡傳輸協議,網絡泯瀧博客

為什麼有這個東西？

web緩存描述：

Web 緩存是可以自動保存常見文檔副本的 HTTP 設備。當 Web 請求抵達緩存時，如果本地有“已緩存的”副本，就可以從本地存儲設備而不是原始服務器中提取這個文檔。（此結論來自http權威指南）

緩存的優缺點：

優點：

緩存減少了冗餘的數據傳輸，節省了你的網絡費用。
緩存緩解了網絡瓶頸的問題。不需要更多的帶寬就能夠更快地加載頁面。
緩存降低了對原始服務器的要求。服務器可以更快地響應，避免過載的出現。
緩存降低了距離時延，因為從較遠的地方加載頁面會更慢一些。

缺點：

緩存中的數據可能與服務器的數據不一致；
消耗內存；

第一階段、強緩存驗證：

根據請求頭相關控制字段開始嘗試命中

1、驗證位置：本地（內存或者硬盤，根據瀏覽器策略決定），
2、驗證字段：就兩個，expires (http1.0中出現)和cache-control (http1.1中出現)，如果這兩個字段同時出現，cache-control會覆蓋expires

3、驗證流程：查看兩個字段的指定時間，如果過期則跳到下一階段（協商緩存）

4、如果命中：狀態碼：200 (from disk cache)或是200 OK (from memory cache) 註釋：根據該緩存的內存佔用進行存儲，內存佔用過高則存入磁盤

`cache-control` 常用的參數：

private：客户端可以緩存
public：客户端和代理服務器均可緩存；
max-age=xxx：緩存的資源將在 xxx 秒後過期，常見：2592000（三十天）、31536000（一年）；
no-cache：跳過當前強驗證步驟，使用下一階段協商緩存來驗證是否過期；
must-revalidate：如果強緩存時間過期，必須去服務器進行有效性檢驗這個舊的緩存
no-transform：多用於圖片，不允許對資源進行轉換壓縮

第二階段、協商緩存驗證：

1、驗證位置：服務器；

2、驗證字段：有兩組，Last-Modified + If-Modified-Since和ETag + If-None-Match

3、驗證流程：
①Last-Modified + If-Modified-Since: 修改日期比較
上次請求時，緩存文件中的Last-Modified記錄該資源的修改日期，本次請求時，Last-Modified會通過請求頭If-Modified-Since傳遞給服務器，服務器端的最新修改日期和該緩存文件的最新修改日期比較；
② ETag + If-None-Match: 緩存驗證
ETag是服務器端認為設置的一串唯一字符串（一般是哈希或者版本號），本次請求時，If-None-Match 傳入緩存文件的ETag值，去和服務器裏的該資源的ETag比較，以達到緩存驗證的目的；

4、驗證結果：
①Last-Modified + If-Modified-Since:
如果If-Modified-Since值就是服務器端該文件的最新修改日期，説明緩存是新鮮的，服務器返回304，瀏覽器使用本地緩存；
如果If-Modified-Since值早於服務器端該文件的最新修改日期，説明緩存不新鮮，服務器返回新的該資源，並且更新該資源Last-Modified日期
② ETag + If-None-Match：
如果If-None-Match傳遞給後台的緩存ETag值和後台對應該文件的ETag值一樣，説明該緩存新鮮，服務器返回 304 狀態碼，瀏覽器使用本地緩存；
如果If-None-Match傳遞給後台的緩存ETag值和後台對應該文件的ETag值不一樣，説明該緩存不新鮮，服務器返回更新的資源和新的 Etag值；