HTTP - 緩存策略

前端開發的同窗你們都知道，項目中的靜態文件等信息，都要作緩存處理，這裏，咱們就來講一下HTTP的緩存策略。

what

緩存，顧名思義，其實就把是拿到的資源存起來，下次要用的時候就能夠直接使用啦。有什麼做用呢？重用已獲取的資源可以有效的提高網站與應用的性能。

類型

緩存實際上是一個很廣義的概念，用到的地方不少，固然做用只有一個，就是利用空間換取時間，讀取本地的資源固然會比取遠端讀取資源來得快得多。

緩存能夠在不少地方：

• 瀏覽器緩存：用戶請求過一次以後，直接把資源緩存到本地
• 網關緩存：對某個網站的資源進行緩存，用戶可直接在網關獲取數據便可
• 服務器緩存：對某些變更不大的get請求，使用緩存可提高接口速度

這裏，咱們主要講的是瀏覽器緩存～

瀏覽器緩存

當咱們搭建一個網站的時候，其實一些靜態資源的改動並不會很常常，好比：js、css、圖片等，這種資源，其實咱們能夠緩存到用戶的本地，下次訪問這些資源的時候，直接從命中緩存便可，即加快用戶訪問速度，又能夠減小服務器的壓力。

HTTP的緩存，分爲兩種：強緩存 & 協商緩存

強緩存

強緩存，即用戶請求資源的時候，發現資源爲強緩存類型，直接獲取緩存數據便可。

當用戶第一次請求資源時，http經過響應頭設置緩存策略。瀏覽器接受到強緩存的信息以後就會把資源緩存到用戶本地。

命中強緩存有兩個字段，下圖爲掘金某個css的響應頭。

// response 響應頭 
// http 1.1
// 相對時間
Cache-Control: max-age=4349423
// http 1.0
// 絕對時間
Expires: Sun, 27 Jan 2019 12:19:08 GMT
複製代碼

用戶第二次訪問資源的時候，若是緩存不過時，那麼瀏覽器直接拉取緩存數據便可。

協商緩存

那麼，當瀏覽器緩存過時了怎麼辦？這時協商緩存就派上用場了～

當咱們訪問資源時，響應頭會攜帶協商緩存相關的字段。

// response 響應頭 
// http 1.1
// 版本號，惟一值
ETag: "FgYgxdS8M2VvNzaIz7oN1XW10A8l.gz"
// http 1.0
// 最後更新時間
Last-Modified: Fri, 17 Nov 2017 07:31:58 GMT
複製代碼

當強緩存過時時，瀏覽器發請求的時候會攜帶協商緩存對應的字段在請求頭中，服務器根據請求頭中的信息，若是命中緩存，則返回304，不然直接請求數據便可。

// requet 請求頭
// http 1.1
// 上一次請求的ETag
If-None-Match: "FgYgxdS8M2VvNzaIz7oN1XW10A8l.gz"
// http 1.0
// 上一次請求的Last-Modified
If-Modified-Since : Fri, 17 Nov 2017 07:31:58 GMT
複製代碼

下圖例子使用的是http 1.1，因此攜帶的是 If-None-Match

常見問題

緩存當然好用，可是在開發過程當中，常常會遇到由於緩存而沒有更新的狀況。這裏記一下經常使用的兩個方案：

• 添加版號參數：binnie.js?v=1.0
• 命名添加hash值：binnie.hash.js

寫在最後

緩存能夠有效提高請求速度，減小服務器壓力，在項目中能夠好好利用～