學習瀏覽器緩存(http緩存)

時間 2019-12-11

原文原文鏈接

Q: 瀏覽器緩存是個什麼東東，爲何要學習瀏覽器緩存涅？

A: 瀏覽器緩存其實就是瀏覽器保存經過HTTP獲取的全部資源,是瀏覽器將網絡資源存儲在本地的一種行爲。瀏覽器緩存能夠減小冗餘數據的傳輸，減少服務器的負擔，提升網站性能，頁面利用緩存快速的響應。

任何事物都是有兩面性滴，用的好，能夠提高用戶體驗，用很差，還會下降用戶體驗。

緩存是何時用到的呢，這要從瀏覽器發起請求提及了，
!(瀏覽器緩存)[https://user-gold-cdn.xitu.io/2019/1/21/1686e2735297a596?imageView2/0/w/1280/h/960/format/webp/ignore-error/1]html

瀏覽器緩存的分類

強緩存
協商緩存程序員

瀏覽器再向服務器請求資源時,首先判斷是否命中強緩存,再判斷是否命中協商緩存!web

強緩存
瀏覽器在加載資源時，會先根據本地緩存資源的 header 中的信息判斷是否命中強緩存，若是命中則直接使用緩存中的資源不會再向服務器發送請求。

這裏的 header 中的信息指的是 expires 和 cahe-control.後端

Expires
該字段是 http1.0 時的規範，它的值爲一個絕對時間的 GMT 格式的時間字符串，好比 Expires:Mon,18 Oct 2066 23:59:59 GMT。這個時間表明着這個資源的失效時間，在此時間以前，即命中緩存。這種方式有一個明顯的缺點，因爲失效時間是一個絕對時間，因此當服務器與客戶端時間誤差較大時，就會致使緩存混亂。
Cache-Control
Cache-Control 是 http1.1 時出現的 header 信息，主要是利用該字段的 max-age 值來進行判斷，它是一個相對時間，例如 Cache-Control:max-age=3600，表明着資源的有效期是 3600 秒。cache-control 除了該字段外，還有下面幾個比較經常使用的設置值：
no-cache：須要進行協商緩存，發送請求到服務器確認是否使用緩存。
no-store：禁止使用緩存，每一次都要從新請求數據。
public：能夠被全部的用戶緩存，包括終端用戶和 CDN 等中間代理服務器。
private：只能被終端用戶的瀏覽器緩存，不容許 CDN 等中繼緩存服務器對其緩存。瀏覽器

Cache-Control 與 Expires 能夠在服務端配置同時啓用，同時啓用的時候 Cache-Control 優先級高。緩存
協商緩存
當強緩存沒有命中的時候，瀏覽器會發送一個請求到服務器，服務器根據 header 中的部分信息來判斷是否命中緩存。若是命中，則返回 304 ，告訴瀏覽器資源未更新，可以使用本地的緩存。
這裏的 header 中的信息指的是 Last-Modify/If-Modify-Since 和 ETag/If-None-Match.
Last-Modify/If-Modify-Since
瀏覽器第一次請求一個資源的時候，服務器返回的 header 中會加上 Last-Modify，Last-modify 是一個時間標識該資源的最後修改時間。
當瀏覽器再次請求該資源時，request 的請求頭中會包含 If-Modify-Since，該值爲緩存以前返回的 Last-Modify。服務器收到 If-Modify-Since 後，根據資源的最後修改時間判斷是否命中緩存。
若是命中緩存，則返回 304，而且不會返回資源內容，而且不會返回 Last-Modify。
缺點:
短期內資源發生了改變，Last-Modified 並不會發生變化。
週期性變化。若是這個資源在一個週期內修改回原來的樣子了，咱們認爲是可使用緩存的，可是 Last-Modified 可不這樣認爲,所以便有了 ETag。
ETag/If-None-Match
與 Last-Modify/If-Modify-Since 不一樣的是，Etag/If-None-Match 返回的是一個校驗碼。ETag 能夠保證每個資源是惟一的，資源變化都會致使 ETag 變化。服務器根據瀏覽器上送的 If-None-Match 值來判斷是否命中緩存。
與 Last-Modified 不同的是，當服務器返回 304 Not Modified 的響應時，因爲 ETag 從新生成過，response header 中還會把這個 ETag 返回，即便這個 ETag 跟以前的沒有變化。服務器