應用場景

瞭解 HTTP（我們這裡說的是 HTTP/1.1） 協議中快取的處理機制，會對網站優化有些許幫助，例如會應用到：加速網站的載入，伺服器端與瀏覽器檔案及時同步。

瀏覽器請求 URL 時，根據 HTTP 協議的規定，瀏覽器與伺服器會通過報頭（HTTP Request Header、HTTP Reponse Header）進行交流，並根據其協議中和快取的相關欄位（Expires、Last-Modified、ETag）進行處理快取。引數示例如下：

• Expires: 12:07:08 Monday, May 20, 2013 GMT
• Last Modification: 03:21:32 Wednesday, November 21, 2012 GMT
• Last Cache Update: 12:07:08 Wednesday, November 21, 2012 GMT
• Last Access: 14:33:07 Tuesday, November 27, 2012
• ETag: “3511605509″

快取處理流程

1.瀏覽器第一次請求 URL，若此資源正常伺服器將返回狀態 200，並獲取儲存與快取相關的屬性，用於以後的請求：

• Expires: 記錄超時時間，即檔案到了這個記錄的時間點，就不能再用瀏覽器的對應此 URL 的快取了，該去伺服器上拿了。
• Last Modification: 伺服器中，此 URL 對應檔案在伺服器的最近更新時間。
• ETag:
   “被請求變數的實體標記”，可以理解為伺服器中此 URL 對應檔案的唯一識別符號。

2.瀏覽器第二次請求 URL，首先將比較 Expires 的時間與當前請求時間，若未超時，則直接讀取快取，不與伺服器互動。

3.若比較 Expires 發現已超時或快取失效時，瀏覽器將請求 URL。同時帶了屬性，用於檢測檔案是否更新：

• If-None-Match: 值為第一次請求的 ETag。
• If-Modified-Since: 值為第一次請求的 Last-Modification。

4.若 If-None-Match 值（即 ETag）未改變，且 If-Modified-Since 該時間之後檔案未被修改過，則伺服器僅返回狀態 304，意思就是，不用更新，從快取中拿吧~ 這樣做的好處是，不用重複傳輸檔案內容了，提高了載入速度又確定了檔案與伺服器一致，另外，也重新計算 Expires 的值（若超時時間為 24h，則 Expires 值重新整理為此請求時間的一天後）。

5.若 If-None-Match 值改變，或比較 If-Modified-Since 時間發現檔案被修改，則檔案已更新，伺服器將重新發出資源，返回和第一次請求流程類似。

流程結束。這樣的流程好處是：既保證不向瀏覽器重複傳送同一資源，有保證了當伺服器 URL 對應資源有更新時，客戶端能夠同步到最新的資源。

應用例項

在實際的網站開發中，線上環境通常會有出現 CSS、JS 更新，若伺服器端已更新，而瀏覽器還是在使用快取而不同步，將出現頁面展示或 JS 異常等問題，為了保證瀏覽器能及時同步資源，我們可以這樣做：

將 Expires 設定為 -1，意思是立即超時，則每次載入資源都會請求 URL，通過 Last Modification 和 ETag 來由伺服器來判斷是否更新。這樣就保證了伺服器與瀏覽器資原始檔同步。

上面的方法雖然同步了，但是也使所有資原始檔每次都將訪問伺服器，而建立連線，本來就會有時間損耗，所以改進如下：

將 Expires 設為一年或者更長 ，則瀏覽器不會主動請求 URL。但在 URL 後面加上類似時間戳的引數，例如 “website/css/index.css?tm=2012112730.css”，後面跟的引數其實是沒有實際意義的，但是，每次在我們需要客戶端同步對應檔案時，僅需要修改對應檔案 URL 的 tm 引數即可，瀏覽器發現 URL 為新 URL，將即刻更新。

百度、淘寶等對 JS、CSS快取處理用的基本都是上面的策略，這樣做的好處是：瀏覽器預設任何時候都僅使用快取，加快了載入。而當檔案需要更新時，通過修改引數又能讓瀏覽器及時更新。

總結

瞭解協議對優化和規範網站開發有不少幫助，上面提到的屬性和應用場景容易被開發者疏忽，在現在這種網際網路開發迭代速度極快的節奏下，上面的問題就會更加容易暴露，規範處理好了會省心很多。

本文提到的屬性和應用場景是協議和網站開發的一小部分，拋磚引玉，歡迎糾錯