Cache-Control、ETag和過時的Expires

樑廣銘發表於2019-02-16

前記

HTTP快取是web效能優化的一個常識，目的是當你第二次請求時，將JS、CSS、的請求速度加快，但是html卻不能設定Cache-Control，這是為什麼，可以想一想

Cache-Control

如何用

response.setHeader(`Cache-Control`,`max-age=315360000`)

響應設定響應頭，max-age是設定快取停留時間，單位為秒，從你接收到那個響應開始計時，一般是設定10年或者1年

功能

設定Cache-Control可以在一段時間內不訪問伺服器，直接用本地記憶體或者硬碟中獲取響應，因此極大的加快了訪問速度，關鍵在於不會傳送HTTP請求。

更新資源

當快取那麼久，那如果快取資源更新了怎麼辦

  • 可以新增查詢引數，如?v=...這樣就可以更新快取了
  • 還有就是可以在入口html檔案處把url變一下，和以前的都不一樣，也可以更新快取
  • 還有就是在檔名前面生成一串字元，變更檔名，也可以更新快取

ETag

說到ETag就不得不提md5摘要演算法，這個演算法可以計算一個檔案，然後生成一串字元，相同檔案內容生成的字串是一樣的，如果內容不相同生成的字串就會不一樣，並且內容差別越小，字串差別越大

如何用

response.setHeader(`ETag`, fileMd5)

fileMd5就是md5生成的字串

功能

設定了ETag後，以後每次訪問伺服器都要設定頭If-None-Match來帶上那串字串，資源未變更，伺服器就會返回304，和Cache-Control不同就是，ETag還是會請求，不過資源不變的話，響應體是空的。

更新資源

這就非常簡單了，當伺服器更換了一個資源，那生成的字串就會不一樣，當If-None-Match帶著原來的字串來比較時，發現字串不一樣，那就會下載新的資源

過時的Expires

Expires也是一個響應頭，功能和Cache-Control差不多，但是現在逐漸被淘汰了，並且如果在Cache-Control響應頭設定了 “max-age” 或者 “s-max-age” 指令，那麼Expires頭會被忽略。
究其原因是因為Expires也是設定時間來做期限，但是它設定的是到期時間，並且要是GMT格式的時間，最致命的是它的到期時間是依據系統時間來看的，如果系統時間錯誤超過了Expires的到期時間，那麼就會請求不到資源。

相關文章