javascript 前端優化-瀏覽器緩存

瀏覽器緩存做用

• 加快頁面打開速度
• 減輕服務器壓力
• 減小網絡損耗

瀏覽器緩存有兩種方式：

一、mate標籤

二、header頭

• mate標籤控制
  一、content-type(文檔內容類型：用於設定文檔的類型和字符集)
  二、expires(期限：能夠用於設定網頁的到期期限)
  三、pragma（cashe模式：便是否從緩存中訪問網頁內容）
  四、refresh(刷新：等待必定時間自動刷新或跳轉到其餘url)

// 文檔類型
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

// 必須是 GMT 格式
<meta http-equiv="expires" content="Fri,12 Jan 2001 15:15:15 GMT">

// 是否設置緩存
<meta http-equiv="pragma" content="no-cache">

// 等待必定時間自動跳轉
<meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>

*說了這麼多 mate兼容性不靠譜！因此說基本沒用

接下來講點有用的，瀏覽器會經過Response header信息，來確認是否緩存，怎麼緩存。

頭信息緩存機制有分兩種

• 強緩存
• 協商緩存

先說強緩存：

在控制檯資源加載 size欄咱們會看到架子啊資源的大小，若是是緩存直接在本地讀取 （from memory cache 來自內存緩存）（from disk cache 來自磁盤緩存）

瀏覽器加載資源時先判斷頭信息是否包含Cache-Control和Expires這兩個屬性，Expires是http1.0，Cache-Control是http1.1,從版本上來講確定是Cache-control更強一些，畢竟不能越升級越low，約定也是兩個同時存在Cache-control優先級更高。

截圖爲js的Response header信息，包含Cache-control和Expires，但從字面上咱們能看出Expires設置了一個時間，咱們猜它應該是過時時間，擦竟然猜對了。咱們再猜一下Cache-control：一坨字段，max-age=31536000，我猜也是過時時間，哈哈又猜對了，不逗比了挨個說說

Expires：設置瀏覽器緩存時間，時間是絕對時間，從設置的值上能夠看出是個日期，瀏覽器收到Response時看看有沒有Expires字段有的話緩存頭信息和資源，再次請求時查看緩存時間過沒過，沒過在緩存拿出來，過了從新請求。

Cache-control：這個承載值就多了

max-age=xxx：緩存的內容將在 xxx 秒後失效，這個時間是個時間間隔相對時間。
public：全部內容都將被緩存（客戶端和代理服務器均可緩存）
private：內容只緩存到私有緩存中（僅客戶端能夠緩存，代理服務器不可緩存）
no-cache：必須先與服務器確認返回的響應是否被更改，而後才能使用該響應來知足後續對同一個網址的請求。所以，若是存在合適的驗證令牌（ETag），no-cache 會發起往返通訊來驗證緩存的響應，若是資源未被更改，能夠避免下載
no-store：全部內容都不會被緩存或 Internet 臨時文件中
must-revalidation/proxy-revalidation：若是緩存的內容失效，請求必須發送到服務器/代理以進行從新驗證

服務端如何判斷緩存已失效？

服務端經過If-Modified-Since（Last-Modified）和If-None-Match（Etag）這兩個屬性的值來判斷緩存是否失效的。

二、協商緩存：當瀏覽器判斷不是強緩存，就會發向服務器發請求，判斷是不是協商緩存。若是是，服務器會返回304Not Modified，瀏覽器從緩存中加載。那什麼又是協商緩存呢？

Last-Modified和If-Modified-Since字段：

一、瀏覽器第一次向服務器發請求，服務器返回資源並在response header加上Last-Modified字段，表示資源最後修改的時間。
二、瀏覽器再次請求這個資源時，請求頭會加上If-Modified-Since字段。若這兩個字段同樣，說明資源沒有修改過，返回304Not Modified，瀏覽器從緩存中獲取資源。若這兩個字段不同，說明資源修改過，服務器正常返回資源。

ETag、If-None-Match：

但有時候服務器上資源有變化，單最後修改時間沒更新，則引出下面兩個字段。
一、瀏覽器第一次向服務器請求，服務器返回資源並在response header上加ETag字段。表示資源自己，資源有變化，則該字段有變化。
二、瀏覽器再次向服務器請求這個資源時，請求頭攜帶If-None-Match字段。若這兩個字段相同，則表明資源沒有變化，服務器返回304Not Modified，瀏覽器從緩存中加載。若兩個字段不一樣，證實資源有變更，服務器正常返回資源。

參考：
https://juejin.im/post/5a7a8e...
https://juejin.im/post/59c602...