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，沒有向服務器發出請求
問題
- 爲什麼首頁不設置Cache-Control呢？ 如果首頁緩存，刷新首頁的時候根本不會請求服務器，那麼如果服務器更新了代碼，瀏覽器將沒有辦法接收到新的版本。一般首頁，HTML不要設置Cache-Control。js和css要設置久一點例如10年,即一直保留有緩存。
- 那麼js和css更新了怎麼辦？
瀏覽器請求時發現是相同的URL才使用緩存，那麼可以設置查詢參數，例如第二個版本的js可以寫
<script src="./main.js?v=2"></script>,來保證URL的不同，重新獲取新的js文件。這樣即可以緩存很久，又可以隨時更新
例如知乎的網頁裏的請求：
總結
通過網絡獲取內容既速度緩慢又開銷巨大。較大的響應需要在客戶端與服務器之間進行多次往返通信，這會延遲瀏覽器獲得和處理內容的時間，還會增加訪問者的流量費用。因此，緩存並重複利用之前獲取的資源的能力成爲性能優化的一個關鍵方面。好在每個瀏覽器都自帶了 HTTP 緩存實現功能。您只需要確保每個服務器響應都提供正確的 HTTP 標頭指令，以指示瀏覽器何時可以緩存響應以及可以緩存多久。
Expires
- Expires 是以前用來控制緩存的http頭，Cache-Control是新版的API。
- 現在首選 Cache-Control。
- 如果在Cache-Control響應頭設置了 "max-age" 或者 "s-max-age" 指令，那麼 Expires 頭會被忽略。
- 響應頭設置方式：
Expires: Wed, 21 Oct 2015 07:28:00 GMT - Expires 響應頭包含日期/時間， 即在此時候之後，響應過期。
注意： 因爲過期標準的時間用的是本地時間，所以不靠譜，所以要遊俠使用Cache-Control代替Expires
區別
- Cache-Control設置時間長度
- Expires 設置時間點
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一樣，那麼就不下載響應體