HTTP緩存（Cache-Control、Expires 、ETag）

HTTP緩存

HTTP緩存（ ETag、Cache-Control）——谷歌開發者
HTTP緩存有利於web性能優化

Cache-Control

例子

假設咱們首頁有一個請求,請求js文件
<script src="./main.js"></script>
如何讓CSS和JS請求速度加快?

此時打開首頁

發現這個文件大小爲279KB，使用時間爲382ms

若是再次刷新首頁，那麼這個文件還會被再次請求一次。那麼如何重複利用以前獲取的資源而不用反覆請求呢？答案是HTTP緩存，這是性能優化的一個重要方面。

接下來在響應裏設置響應頭
Cache-Control: max-age=30
刷新兩次首頁

第二次的時間爲0
響應頭中的Cache-Control: max-age=30表示客戶端將這個緩存最多 保存30 秒，30秒後再次請求文件將會再次下載。

即：
設置這個響應頭以後，瀏覽器請求時發現是相同的URL，瀏覽器直接從內存裏返回已經緩存的main.js，沒有向服務器發出請求

問題

1. 爲何首頁不設置Cache-Control呢？
   若是首頁緩存，刷新首頁的時候根本不會請求服務器，那麼若是服務器更新了代碼，瀏覽器將沒有辦法接收到新的版本。通常首頁，HTML不要設置Cache-Control。js和css要設置久一點例如10年,即一直保留有緩存。
2. 那麼js和css更新了怎麼辦？
   瀏覽器請求時發現是相同的URL才使用緩存，那麼能夠設置查詢參數，例如第二個版本的js能夠寫<script src="./main.js?v=2"></script>,來保證URL的不一樣，從新獲取新的js文件。這樣便可以緩存好久，又能夠隨時更新

   

   例如知乎的網頁裏的請求：

   

總結

經過網絡獲取內容既速度緩慢又開銷巨大。較大的響應須要在客戶端與服務器之間進行屢次往返通訊，這會延遲瀏覽器得到和處理內容的時間，還會增長訪問者的流量費用。所以，緩存並重複利用以前獲取的資源的能力成爲性能優化的一個關鍵方面。

好在每一個瀏覽器都自帶了 HTTP 緩存實現功能。您只須要確保每一個服務器響應都提供正確的 HTTP
標頭指令，以指示瀏覽器什麼時候能夠緩存響應以及能夠緩存多久。

Expires

1. Expires 是之前用來控制緩存的http頭，Cache-Control是新版的API。
2. 如今首選 Cache-Control。
3. 若是在Cache-Control響應頭設置了 "max-age" 或者 "s-max-age" 指令，那麼 Expires 頭會被忽略。
4. 響應頭設置方式：
   Expires: Wed, 21 Oct 2015 07:28:00 GMT
5. Expires 響應頭包含日期/時間， 即在此時候以後，響應過時。

注意： 由於過時標準的時間用的是本地時間，因此不靠譜，因此要遊俠使用Cache-Control代替Expires

區別

1. Cache-Control設置時間長度
2. Expires 設置時間點

詳細：Expires - HTTP | MDN

MD5

MD5是消息摘要算法。用於確保信息傳輸完整一致。

具體做用這樣

接受一個String 或 Buffer，返回一個固定的String

若是接受的String改變，那麼返回的String也會改變
例如將1.txt中的其中一個1改成0，那麼返回值以下

可見返回至徹底改變了
這個特性能夠用來判斷兩次信息傳輸是否完整一致

ETag

例子：

例如咱們請求一個js文件。
設置一個ETag響應頭

設置的ETage響應頭爲這個JS文件的MD5值
查看響應：

那麼：下一次請求這個JS的時候，瀏覽器會把上一次響應的那個ETage的值放到If-None-Match裏面，如圖：

這樣作的做用是：若是請求和響應的MD5同樣，說明不須要從新下載這個js文件。這時咱們修改代碼：

若是MD5同樣，說明文件沒改過，那麼返回304

304 Not Modified：
HTTP 304 未改變說明 無需再次傳輸請求的內容，也就是說能夠 使用緩存的內容。

HTTP 304 沒有響應體，由於不須要下載響應內容，直接用緩存就好了

ETag與 Cache-Control的區別

假設咱們請求兩個文件，CSS文件使用Cache-Control緩存，js文件使用ETag。
代碼以下：

兩個請求區別：

因此：

• 因爲CSS的請求是用緩存（Cache-Control）的，因此直接不發請求
• 而js用的ETag，有請求也有響應，只不過若是MD5同樣，那麼就不下載響應體

個人博客即將同步至騰訊雲+社區，邀請你們一同入駐：https://cloud.tencent.com/dev...