HTTP - 快取策略

寫不好程式碼的格子襯衫發表於2019-01-22
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
複製程式碼

HTTP - 快取策略

使用者第二次訪問資源的時候，如果快取不過期，那麼瀏覽器直接拉取快取資料即可。

HTTP - 快取策略

協商快取

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

當我們訪問資源時，響應頭會攜帶協商快取相關的欄位。

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

HTTP - 快取策略

當強快取過期時，瀏覽器發請求的時候會攜帶協商快取對應的欄位在請求頭中，伺服器根據請求頭中的資訊，如果命中快取，則返回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

HTTP - 快取策略

常見問題

快取固然好用，但是在開發過程中，經常會遇到因為快取而沒有更新的情況。這裡記一下常用的兩個方案：

  • 新增版號引數：binnie.js?v=1.0
  • 命名新增hash值：binnie.hash.js

寫在最後

快取可以有效提升請求速度，減少伺服器壓力，在專案中可以好好利用～

相關文章