瀏覽器緩存解析

瀏覽器緩存

瀏覽器緩存分爲幾個階段：

瀏覽器緩存階段

一.強制緩存階段

1.cache-control: 決定了瀏覽器端和服務器端緩存的策略，能夠出如今響應頭response header中，或者 請求頭 request header中

• max-age：指定緩存的最大有效時間，eg:cache-control:max-age=315360000,注意與
  expires作區分（與cache-control平級）,max-age優先級高於 expires，這個屬性時HTTP1.1中新增的屬性
• s-maxage：指定public的緩存，緩存設備有不少，不單單瀏覽器是緩存設備，在整個網絡中，可能會存在代理服務器，CDN屬於public緩存設備，由於能夠多用戶訪問並讀取信息；什麼是private緩存呢，指的是隻是你我的訪問的設備，瀏覽器就屬於private緩存設備，eg:s-maxage=31536000；他的優先級高於max-age，只能設定public的緩存設備
• private
• public
• no-cache：錯誤理解：不使用緩存；no-cache指的是無論本地是否設置了max-age（即忽略本地瀏覽器端的緩存策略），都要向服務器端發送請求，由服務器端來判斷緩存狀況
• no-store：徹底不使用任何的緩存策略，無論是服務器端仍是瀏覽器端的

2.expires:Thu, 14 Mar 2019 17:29:17 GMT，這個屬性時HTTP1.0中配置，

• 緩存過時時間，用來指定資源到期時間，是服務器端具體的時間點。
• 告訴瀏覽器在過時時間前瀏覽器能夠直接從瀏覽器緩存取數據，而無需再次請求。

二.協商緩存階段

基於客戶端和服務器端的協商緩存機制

1.last-modified

last-modified - response header
if-modified-since - request header

須要與cache-control共同使用，若是配置了max-age 且沒有過時，就不會使用last-modified；過時了以後，纔會使用last-modified。

last-modified 缺點：

• 服務器端不能精確獲取 文件變動時間時
• 文件修改時間改了，文件內容沒有變
• 以秒爲單位，若是是ms內修改了文件，就體現不出來

2.ETag

文檔內容的hash值
ETag ---- response header
if-None-Match ----request header

etag優先級高於last-modified

狀態碼解析

• 200(from cache): 瀏覽器端緩存，cache-control:max-age=315360000
  或者expires起做用
• 304: 服務器端緩存,last-modified 或者 etag 起做用
• 200：瀏覽器端沒有緩存，或者服務器端緩存失效，或者用戶點擊了ctrl+F5 瀏覽器直接從服務器端下載最新的數據

注意：Chrome瀏覽器，手動點擊刷新按鈕都會 在請求頭中，添加 chche-control:max-age=0,這樣就確定不會使用瀏覽器端的緩存！

更加詳細，請參考：緩存詳解