網頁緩存相關的HTTP頭部信息詳解

前言

之前看完了李智慧老師著的《大型網站技術架構-核心原理與案例分析》這本書，書中多次提起瀏覽器緩存的話題，恰是這幾天生產又遇到了一個與緩存的問題，發現自己書是沒少看，正經走心的內容卻不多，這次就藉着工作中遇到的問題，一併把與網頁緩存相關的HTTP頭部信息總結一番，一來總結給自己看，以便後期查閱；二來把自己的想法和園中朋友分享，互相指點，如此，豈不妙哉！！！

簡單的總結來說，在HTTP中與網頁緩存相關的HTTP頭部信息分爲以下三組：

• Last-Modified和If-Modified-Since
• ETags和If-None-Match
• Expires和Cache-Control

下面就分別對這三組HTTP頭進行詳細的說明和總結！

Last-Modified和If-Modified-Since

在HTTP中Last-Modified與If-Modified-Since都是用於記錄頁面最後修改時間的HTTP頭信息，二者的區別如下：

• Last-Modified是由服務器往客戶端發送的HTTP頭；
• If-Modified-Since是由客戶端往服務器發送的頭。

所以，請牢牢記住上述基本知識點，這樣才能工作中分析請求包時不會暈頭轉向。

如上圖所示，用戶通過瀏覽器第一次請求相關網頁時，服務器會返回一個Last-Modified:Mon, 26 Apr 2019 13:22:17 GMT這樣的請求頭；當用戶再次訪問對應的網頁時，瀏覽器會將服務器響應的Last-Modified值賦給If-Modified-Since，接下來，瀏覽器會帶着If-Modified-Since:Mon, 26 Apr 2019 13:22:17 GMT這樣的請求頭去訪問服務器應用。服務器收到請求後，會將這個對應網頁的更新時間與If-Modified-Since進行比對以決定是返回304重定向碼還是200成功碼。

ETags和If-None-Match

通過上面的總結，我們知道Last-Modified和If-Modified-Since只能判斷資源的最後修改時間，以此來決定是否使用緩存。而ETags和If-None-Match則比較更高級一點。通過ETags和If-None-Match，我們可以對資源的任何屬性進行判斷，以此判斷是否使用緩存。同樣的，我們也需要記住ETags和If-None-Match的兩個知識點：

• ETags是由服務器往客戶端發送的HTTP頭；
• If-None-Match是由客戶端往服務器發送的頭。

請求邏輯與Last-Modified和If-Modified-Since大致一樣，不同之處就是在服務器端的判斷。比如有些特定的場合下，一些靜態的文件，可能會被頻繁的更新，但是文件內容沒有變化，這時候如果使用Last-modified，服務器端始終返回最新的內容給瀏覽器，而Etag是根據文件內容來的，如果內容沒有變化的話，始終會讓瀏覽器使用本地緩存的文件。所以，使使用ETag可以更好的避免一些不必要的服務器相應。

Expires和Cache-Control

添加Expires頭能有效的利用瀏覽器的緩存能力來改善頁面的性能，能在後續的頁面中有效避免很多不必要的HTTP請求，WEB服務器使用Expires頭來告訴Web客戶端它可以使用一個組件的當前副本，直到指定的時間爲止。例如：Expires：Thu，15 Apr 2019 20：00：00 GMT;這個告訴瀏覽器緩存有效性持續到2019年4月15日爲止，在這個時間之內相同的請求使用緩存，這個時間之外使用HTTP請求。與上面說到的Last-Modified和If-Modified-Since和ETags和If-None-Match相比，是能夠節省一點帶寬的，因爲可能會少發一次HTTP請求。

但是Expires有一個明顯的缺點；由於返回的到期時間是服務器端的時間，這樣存在一個問題，如果客戶端的時間與服務器的時間相差很大，那麼誤差就很大，所以在HTTP 1.1版開始，使用Cache-Control:max-age=秒替代。如果Cache-Control與Expires同時存在，Cache-Control生效。

由於現在基本上都在使用Cache-Control，所以有必要對Cache-Control進行詳細的總結一下。

• Cache-Control的可緩存性：

  取值	說明
  public	HTTP返回的時候在Heaher中設置Cache-Control的值爲public。它代表，這個HTTP請求它返回的內容所經過的任何路徑中，包括中間的一些HTTP代理服務器以及發出請求的客戶端瀏覽器，都可以進行對返回內容的緩存操作
  private	發起請求的瀏覽器才能使用返回數據的緩存
  no-cache	可以在本地或者proxy服務器進行緩存，每次發起請求都要去服務器驗證，服務器返回可以使用緩存，纔可以真正使用本地緩存，任何節點都不能直接使用緩存

• Cache-Control的有效期

  取值	說明
  max-age=seconds	最常用模式，表示過期的秒數
  s-maxage=seconds	只有在代理服務器纔會生效，且代理服務器會優先使用s-maxage
  max-stale=seconds	它是發起請求方，主動去帶着的header；在max-age過期後，但還在max-stale的有效期內，還可以使用過期的緩存，不需要去原服務器請求新的內容

• Cache-Control的其它取值

  取值	說明
  no-store	瀏覽器或者proxy服務器都不能存返回數據的緩存，永遠都需要去服務器請求新的數據
  no-transform	主要用在proxy服務器，表示不要去隨意改動返回的內容，比如壓縮什麼的

總結

這些細小的知識點，平時很少主動去關注，但是真正到分析問題的時候，很多時候卻是卡在這些細小的知識點上。還是那句話，細節決定成敗！大的知識點，大的流程，大家都可以說出一二，但是一旦細化了，才知道自己有好多的不懂，有好多的說不清楚。只有退潮了，才知道誰在裸泳！！！

2019年7月21日 於內蒙古呼和浩特。