透過瀏覽器看HTTP快取

作為前端開發人員，對於我們的站點或應用的快取機制我們能做的似乎不多，但這些卻是與我們關注的效能息息相關的部分，站點沒有做任何快取機制，我們的頁面可能會因為資源的下載和渲染變得很慢，但大家都知道去找前端去解決頁面慢的問題而不會去找服務端的開發人員。因此，瞭解相關的快取機制和充分的利用它似乎就變得必不可少。

web端的快取機制其實有多種，我在這裡只是學習和整理了以瀏覽器為載體的HTTP快取機制，看看它是如何工作的。

一、web快取的種類

1.1 資料庫快取

我們可能聽說過memcached，它就是一種資料庫層面的快取方案。資料庫快取是指，當web應用的關係比較複雜，資料庫中的表很多的時候，如果頻繁進行資料庫查詢，很容易導致資料庫不堪重荷。為了提供查詢的效能，將查詢後的資料放到記憶體中進行快取，下次查詢時，直接從記憶體快取直接返回，提供響應效率。

1.2 CDN快取

CDN快取一般是由網站管理員自己部署，為了讓他們的網站更容易擴充套件並獲得更好的效能。通常情況下，瀏覽器先向CDN閘道器發起Web請求，閘道器伺服器後面對應著一臺或多臺負載均衡源伺服器，會根據它們的負載請求，動態將請求轉發到合適的源伺服器上。從瀏覽器角度來看，整個CDN就是一個源伺服器，從這個層面來說，瀏覽器和伺服器之間的快取機制，在這種架構下同樣適用。

1.3 代理伺服器快取

代理伺服器是瀏覽器和源伺服器之間的中間伺服器，瀏覽器先向這個中間伺服器發起Web請求，經過處理後（比如許可權驗證，快取匹配等），再將請求轉發到源伺服器。代理伺服器快取的運作原理跟瀏覽器的運作原理差不多，只是規模更大。

1.4 瀏覽器快取

每個瀏覽器都實現了 HTTP 快取，我們通過瀏覽器使用HTTP協議與伺服器互動的時候，瀏覽器就會根據一套與伺服器約定的規則進行快取工作。

1.5 應用層快取

應用層快取是指我們在程式碼層面上做的快取。通過程式碼邏輯，把曾經請求過的資料或資源等，快取起來，再次需要資料時通過邏輯上的處理選擇可用的快取的資料。

二、為什麼需要瀏覽器快取？我們需要做些什麼？

我們知道通過HTTP協議，在客戶端和瀏覽器建立連線時需要消耗時間，而大的響應需要在客戶端和伺服器之間進行多次往返通訊才能獲得完整的響應，這拖延了瀏覽器可以使用和處理內容的時間。這就增加了訪問伺服器的資料和資源的成本，因此利用瀏覽器的快取機制重用以前獲取的資料就變成了效能優化時需要考慮的事情。

那麼有什麼建議嗎？當然。

為每個資源指定一個明確的快取策略，用以定義資源是否可以快取，由誰來快取，可以快取多久，並且在快取時間到期時如何有效地重新驗證。當伺服器返回一個響應時，它需要在響應頭中提供Cache-Control和ETag。

說到瀏覽器中的快取機制，其實就相當於HTTP協議定義的快取機制，因為瀏覽器為我們實現了它。一般情況下我們會想到到HTTP響應頭中的Expires，Cache-Control,Last-Modified.If-Modified-Since,Etag這樣的與快取相關的響應頭資訊。

但是這裡我們說伺服器返回一個響應時提供必要的Cache-Control和Etag即可。這是為什麼呢？

因為Cache-Control與Expires的作用一致，Last-Modified與ETag的作用也相近。但它們有以下區別：

現在預設瀏覽器均預設使用HTTP 1.1，所以Expires和Last-Modified的作用基本可以忽略，具備Cache-Control和Etag即可。

當然使用者的行為也會影響瀏覽器的快取，像這樣：

但我們先不考慮使用者的操作的影響，來看看伺服器提供Cache-Control和ETag響應頭來進行的快取是如何工作的。

三、使用Etag驗證快取的HTTP響應

通常情況下，請求一個資源的過程大概是這樣的：

我在 再看Ajax  中整理了HTTP請求的請求頭和響應頭的一些引數，這裡就看下Etag的作用。

3.1 Etag的主要作用

伺服器通過 ETag HTTP 頭傳遞驗證碼，大概是像‘‘x123cef’’這樣的字串。當瀏覽器在資源過期後再次請求時，瀏覽器預設會通過If-None-Match傳遞Etag的驗證碼，通過驗證碼可以進行高效的資源更新檢查：如果資源未更改，則不會傳輸任何資料。

Etag就主要用來在響應過期之後，驗證資源是否被修改。

3.2 Etag的工作原理

如上圖，伺服器在第一次返回響應的時候設定了快取的時間120s，假設瀏覽器在這120s經過之後再次請求伺服器相同的資源，首先，瀏覽器會檢查本地快取並找到之前的響應，不幸的是，這個響應現在已經’過期’，無法在使用。此時，瀏覽器也可以直接發出新請求，獲取新的完整響應，但是這樣做效率較低，因為如果資源未被更改過，我們就沒有理由再去下載與快取中已有的完全相同的位元組。

於是就到了Etag發揮作用的時候了，通常伺服器生成並返回在Etag中的驗證碼，常常是檔案內容的雜湊值或者某個其他指紋碼。客戶端不必瞭解指紋碼是如何生成的，只需要在下一個請求中將其傳送給伺服器(瀏覽器預設會新增)：如果指紋碼仍然一致，說明資源未被修改，伺服器會反悔304 Not Modified，這樣我們就可以跳過下載，利用已經快取了的資源，並且該資源會繼續快取120s。就像這樣：

四、什麼是Cache-Control？如何定義Cache-Control？

伺服器響應瀏覽器請求時響應頭中的Cache-Control響應頭使得每個資源都可以通過 Cache-Control HTTP 頭來定義自己的快取策略，Cache-Control 指令用來告訴我們，那個資源在什麼條件下可以快取，以及可以快取多久。

4.1 Cache-Control頭引數的含義(響應頭中的Cache-Control)

1 no-cache : 表示必須先與伺服器確認返回的響應是否被更改，然後才能使用該響應來滿足後續對同一個網址的請求。因此，如果存在合適的驗證令牌 (ETag)，no-cache 會發起往返通訊來驗證快取的響應，如果資源未被更改，可以避免下載。

2 no-store : 禁止快取任何響應，也就是說每次使用者請求資源時，都會向伺服器傳送一個請求，每次都會下載完整的響應。

3 public ： 如果響應被標記為public，即使有關聯的 HTTP 認證，甚至響應狀態碼無法正常快取，響應也可以被快取。

4 private : 瀏覽器可以快取private響應，但是通常只為單個使用者快取，因此，不允許任何代理伺服器對其進行快取 。比如，使用者瀏覽器可以快取包含使用者私人資訊的 HTML 網頁，但是 CDN 不能快取。

5 max-age :  用來設定資源被快取的最長時間(單位是秒)。

4.2 如何使用Cache-Control

通常，我們可以通過下圖的流程來設定合適的響應頭的Cache-Control頭。

五、已經快取的響應，如何更新或廢棄？

一般情況下，瀏覽器發出的所有 HTTP 請求會首先被路由到瀏覽器的快取，以檢視是否快取了可以用於實現請求的有效響應。如果有匹配的響應，會直接從快取中讀取響應，這樣就避免了網路延遲以及傳輸產生的資料成本。然而，如果我們希望更新或廢棄已快取的響應，該怎麼辦？

假設我們已經告訴訪問者某個 CSS 樣式表快取長達 24 小時 (max-age=86400)，但是設計人員剛剛提交了一個更新，我們希望所有使用者都能使用。我們該如何通知所有訪問者快取的 CSS 副本已過時，需要更新快取？

實際上以前沒有請求過該資源的新的使用者會得到更新的資源，但是請求過資源的使用者將在過期時間達到之前一直得到舊的被快取的資源，直到他手動的去清理了瀏覽器的快取。手動清理瀏覽器快取這種事可能只有程式設計師才會做，那麼我們要怎麼做才能讓使用者得到更新後的資源呢？

其實很簡單，我們可以在資源的內容更改後，更改資源的網址，強制使用者下載新響應。比如在資源連結後新增引數：

六、對於快取機制，現在可以做的有哪些？

我在瀏覽資料的時候發現了一個caching checklist，比較具有參考價值，我們可以遵循建議合理的利用快取機制：

1 使用一致的網址：如果在不同的網址上提供相同的內容，那麼將會多次獲取和儲存相同的內容。提示：網址是區分大小寫的！
2 確保伺服器提供驗證碼 (ETag)：通過驗證碼，如果伺服器上的資源未被更改，就不必傳輸相同的位元組。
3 確定代理快取可以快取哪些資源：對所有使用者的響應完全相同的資源很適合由 CDN 或其他代理快取進行快取。
4 確定每個資源的最優快取週期：不同的資源可能有不同的更新要求。審查並確定每個資源適合的 max-age。
5 確定網站的最佳快取層級：對 HTML 文件組合使用包含內容指紋碼的資源網址以及短時間或 no-cache 的生命週期，可以控制客戶端獲取更新的速度。
6 變動最小化：有些資源的更新比其他資源頻繁。如果資源的特定部分（例如 JavaScript 函式或一組 CSS 樣式）會經常更新，應考慮將其程式碼作為單獨的檔案提供。這樣，每次獲取更新時，剩餘內容（例如不會頻繁更新的庫程式碼）可以從快取中獲取，確保下載的內容量最少。