WEB緩存探究

前言

因爲項目愈來愈大，即便了使用代碼壓縮工具減小文件大小，js文件仍是不可避免的越變越大。
而對於用戶來講每次從新下載都有可能會消耗大量時間，讓咱們的首屏展現有較長時間的空白。
爲了提高網站性能，有效利用緩存可以提高用戶體驗，提升訪問效率。

瀏覽器緩存

HTML中的Meta標籤

http-equiv屬性，至關於http的文件頭中的參數，而content的內容則是對應參數的值

<!-- 告訴瀏覽器不緩存當前頁面 -->
<meta http-equiv="pragma" content="no-cache">

然而設置pragma: no-cache並不能應用於HTTP1.1及以上規範，
並且由於這個方法太老了，若是你不須要估計那些史前客戶的感覺，徹底能夠不加?

固然能夠不用太方，還有其餘的參數能夠選擇使用

<meta http-equiv="Cache-Control" content="no-cache" /> <!-- HTTP1.1 在1.1中優先於expires-->
<meta http-equiv="pragma" content="no-cache" /> <!-- HTTP1.0 -->
<meta http-equiv="Expires" content="0" /> <!-- 示意到期時間 HTTP1.0 & 1.1 -->

可是使用meta標籤設置的參數優先級低於http請求中聲明的，若是你同時設置了http頭，那麼就沒有必要加上meta標籤了。

固然，最後還有一個重要的一點，就是根據叉燒包的實驗，meta制定這些內容能夠說基本沒有什麼卵用:)
悲傷的故事……固然可能你的瀏覽器還能夠用哦

Header參數

最保險的顯然是配置Header參數來保證資源的緩存

1. Cache-Control
   Cache-Control 標頭是在 HTTP/1.1 規範中定義的，取代了以前用來定義響應緩存策略的標頭例如 Expires。
   全部現代瀏覽器都支持 Cache-Control。

   • max-age 指從請求的時間開始，容許緩存有效的最長時間(單位是s)

   • public 可被任何對象緩存。它不是必須的，由於明確的緩存信息已表示響應是能夠緩存的

   • private 一般只爲單個用戶緩存，不容許任何中間緩存對其進行緩存

   • no-cache 表示必須先與服務器確認返回的響應是否發生了變化

   • no-store 禁止瀏覽器以及全部中間緩存存儲任何版本的返回響應，每次請求必須從新下載

   借用谷歌爸爸的一張圖來展現一下Cache-Control的選擇策略
   

2. Expires
   它表明一個緩存過時的絕對時間，在HTTP/1.0中實現，在HTTP/1.1中優先級低於Cache-Control。

它的缺點就是若是服務器與客戶端偏差較大，那麼它的偏差也會變大

1. Last-Modified
   標記的是資源的最後修改時間，須要配合Cache-Control使用。只能精確到秒級，若是某些文件在1秒內修改屢次，則沒法及時更新

2. ETag
   至關於驗證令牌。經過它能夠可實現高效的資源更新檢查：資源未發生變化時不會傳送任何數據。

ETag一般是服務器生成的文件內容的哈希值或某個其餘指紋。若是請求時指紋仍然相同，則表示資源未發生變化，則可跳過下載。

參數棄用小指南

• 若是你不考慮ie6和HTTP 1.0客戶端，那麼你能夠無視Pragma

Cache-Control: no-store, must-revalidate
Expires: 0

• 若是你也不打算管HTTP 1.0代理，那麼你能夠無視Expires

Cache-Control: no-store, must-revalidate

• 若是服務器自動包含有效的Date標頭，則理論上也能夠省略Cache-Control，並僅依賴於Expires。不過若是客戶端和服務端時間有差異，就可能會失敗哦

Date: Wed, 24 Aug 2016 18:32:02 GMT
Expires: 0

• 總的來講仍是使用Cache-Control最妥妥的(若是不打算考慮HTTP 1.0)

項目實踐

更新文件&棄用緩存

在項目中，當咱們使用本地緩存後又會遇到另外一個問題——如何更新文件、棄用緩存。
一般，咱們經過對文件名加入指紋來實現。

以webpack爲例，
寫配置文件時

{
    output: {
        filename: "bundle.[hash].js"
    }
}

爲打包後的文件名加上hash，使文件更新以後會生成新的hash，以達到棄用原來緩存的效果。

定製緩存策略

能夠爲不一樣類型的文件定義不一樣的緩存策略，以達到最高效的結果

1. 將HTML被標記爲「no-cache」，使瀏覽器在每次請求時都始終會從新驗證文檔，並在內容變化時可以及時獲取最新版本，即便下載新資源。

2. 容許瀏覽器和中間緩存（如CDN）緩存CSS，並將CSS設置爲1年後到期，超長的緩存時間可讓用戶避免每次都從服務端獲取響應。同時不要忘記給文件名加上指紋，以便及時更新改動

3. JavaScript一樣設置爲1年後到期，但標記爲private，由於它可能會包含某些用戶私人數據，這是CDN不該緩存的。

4. 圖像緩存時不包含版本或惟一指紋，並設置爲1天后到期。

其餘技巧

1. 減小對Cookie的依賴，由於每次HTTP請求都會帶上Cookie，這回增大傳輸流量（固然將靜態資源掛載在其餘域名下，也能夠達到cookie free的效果）