大型網站必備，徹底理解Http的快取機制！

2020 年 3 月 3 日
筆記

概述

瀏覽器的快取機制也就是我們說的HTTP快取機制，其機制是根據HTTP報文的快取標識進行的，所以在分析瀏覽器快取機制之前，我們先使用圖文簡單介紹一下HTTP報文，HTTP報文分為兩種：

HTTP請求(Request)報文，報文格式為：請求行 – HTTP頭(通用資訊頭，請求頭，實體頭) – 請求報文主體(只有POST才有報文主體)，如下圖

HTTP 響應（Response）報文，報文格式為：

註：通用資訊頭指的是請求和響應報文都支援的頭域，分別為：Cache-Control、Connection、Date、Pragma、Transfer-Encoding、Upgrade、Via。實體頭則是實體資訊的實體頭域，分別為：Allow、Content-Base、Content-Encoding、Content-Language、Content-Length、Content-Location、Content-MD5、Content-Range、Content-Type、Etag、Expires、Last-Modified、extension-header。這裡只是為了方便理解，將通用資訊頭，響應頭/請求頭，實體頭都歸為了HTTP頭。

以上的概念在這裡我們不做多講解，只簡單介紹，有興趣的童鞋可以自行研究。

快取過程分析

瀏覽器與伺服器通訊的方式為應答模式，即，瀏覽器發起 HTTP 請求 –> 伺服器響應該請求。

那麼瀏覽器第一次向伺服器發起該請求後拿到請求結果，會根據響應報文中 HTTP 頭的快取標識，決定是否快取結果，是則將請求結果和快取標識存入瀏覽器快取中，簡單的過程如下圖：

由上圖我們可以知道：

瀏覽器每次發起請求，都會先在瀏覽器快取中查找該請求的結果以及快取標識。
瀏覽器每次拿到返回的請求結果都會將該結果和快取標識存入瀏覽器快取中。

以上兩點結論就是瀏覽器快取機制的關鍵，他確保了每個請求的快取存入與讀取，只要我們再理解瀏覽器快取的使用規則，那麼所有的問題就迎刃而解了，本文也將圍繞著這點進行詳細分析。

為了方便大家理解，這裡我們根據是否需要向伺服器重新發起 HTTP 請求將快取過程分為兩個部分，分別是強制快取和協商快取。

強制快取

強制快取就是向瀏覽器快取查找該請求結果，並根據該結果的快取規則來決定是否使用該快取結果的過程，強制快取的情況主要有三種：

不存在該快取結果和快取標識，強制快取失效，則直接向伺服器發起請求（跟第一次發起請求一致），如下圖：

存在該快取結果和快取標識，但該結果已失效，強制快取失效，則使用協商快取(暫不分析)，如下圖：

存在該快取結果和快取標識，且該結果尚未失效，強制快取生效，直接返回該結果，如下圖：

那麼強制快取的快取規則是什麼？

當瀏覽器向伺服器發起請求時，伺服器會將快取規則放入 HTTP 響應報文的 HTTP頭中和請求結果一起返回給瀏覽器，控制強制快取的欄位分別是 Expires 和 Cache-Control，其中 Cache-Control 優先順序比 Expires 高。

Expires

Expires 是 HTTP/1.0 控制網頁快取的欄位，其值為伺服器返回該請求結果快取的到期時間，即再次發起該請求時，如果客戶端的時間小於Expires 的值時，直接使用快取結果。

Expires 是 HTTP/1.0 的欄位，但是現在瀏覽器默認使用的是 HTTP/1.1，那麼在 HTTP/1.1 中網頁快取還是否由 Expires 控制？

到了 HTTP/1.1，Expire 已經被 Cache-Control 替代，原因在於 Expires 控制快取的原理是使用客戶端的時間與服務端返回的時間做對比，那麼如果客戶端與服務端的時間因為某些原因（例如時區不同；客戶端和服務端有一方的時間不準確）發生誤差，那麼強制快取則會直接失效，這樣的話強制快取的存在則毫無意義，那麼 Cache-Control 又是如何控制的呢？

Cache-Control

在 HTTP/1.1 中，Cache-Control 是最重要的規則，主要用於控制網頁快取，主要取值為：

public：所有內容都將被快取（客戶端和代理伺服器都可快取）。
private：所有內容只有客戶端可以快取，Cache-Control 的默認取值。
no-cache：客戶端快取內容，但是是否使用快取則需要經過協商快取來驗證決定。
no-store：所有內容都不會被快取，即不使用強制快取，也不使用協商快取。
max-age=xxx (xxx is numeric)：快取內容將在 xxx 秒後失效。接下來，我們直接看一個例子，如下：

由上面的例子我們可以知道：

HTTP 響應報文中 expires 的時間值，是一個絕對值。

HTTP 響應報文中 Cache-Control 為 max-age=600，是相對值。

由於 Cache-Control 的優先順序比 expires，那麼直接根據 Cache-Control 的值進行快取，意思就是說在 600 秒內再次發起該請求，則會直接使用快取結果，強制快取生效。

註：在無法確定客戶端的時間是否與服務端的時間同步的情況下，C> ache-Control 相比於 expires 是更好的選擇，所以同時存在時，只有Cache-Control 生效。

了解強制快取的過程後，我們拓展性的思考一下：瀏覽器的快取存放在哪裡，如何在瀏覽器中判斷強制快取是否生效？

這裡我們以部落格的請求為例，狀態碼為灰色的請求則代表使用了強制快取，請求對應的 Size 值則代表該快取存放的位置，分別為 from memory cache 和 from disk cache。

那麼 from memory cache 和 from disk cache 又分別代表的是什麼呢？什麼時候會使用 from disk cache，什麼時候會使用from memory cache 呢？

from memory cache 代表使用記憶體中的快取，from disk cache 則代表使用的是硬碟中的快取，瀏覽器讀取快取的順序為 memory –> disk。

雖然我已經直接把結論說出來了，但是相信有不少人對此不能理解，那麼接下來我們一起詳細分析一下快取讀取問題，這裡仍讓以我的部落格為例進行分析：

訪問 https://heyingye.github.io/ –> 200
關閉部落格的標籤頁 –> 重新打開 https://heyingye.github.io/ –> 200 (from disk cache)
刷新 –> 200(from memory cache)

看到這裡可能有人小夥伴問了，最後一個步驟刷新的時候，不是同時存在著 from disk cache 和 from memory cache 嗎？

對於這個問題，我們需要了解記憶體快取（from memory cache）和硬碟快取（from disk cache），如下:

記憶體快取(from memory cache)：記憶體快取具有兩個特點，分別是快速讀取和時效性：
- 快速讀取：記憶體快取會將編譯解析後的文件，直接存入該進程的記憶體中，佔據該進程一定的記憶體資源，以方便下次運行使用時的快速讀取。
- 時效性：一旦該進程關閉，則該進程的記憶體則會清空。
硬碟快取（from disk cache）：硬碟快取則是直接將快取寫入硬碟文件中，讀取快取需要對該快取存放的硬碟文件進行 I/O 操作，然後重新解析該快取內容，讀取複雜，速度比記憶體快取慢。

在瀏覽器中，瀏覽器會在 js 和圖片等文件解析執行後直接存入記憶體快取中，那麼當刷新頁面時只需直接從記憶體快取中讀取；而 css 文件則會存入硬碟文件中，所以每次渲染頁面都需要從硬碟讀取快取。

協商快取

協商快取就是強制快取失效後，瀏覽器攜帶快取標識向伺服器發起請求，由伺服器根據快取標識決定是否使用快取的過程。

主要有以下兩種情況：

協商快取生效，返回 304，如下：

協商快取失效，返回 200 和請求結果結果，如下：

同樣，協商快取的標識也是在響應報文的 HTTP 頭中和請求結果一起返回給瀏覽器的，控制協商快取的欄位分別有：

Last-Modified / If-Modified-Since.
Etag / If-None-Match.

其中 Etag / If-None-Match 的優先順序比 Last-Modified / If-Modified-Since 高。

Last-Modified / If-Modified-Since

Last-Modified 是伺服器響應請求時，返回該資源文件在伺服器最後被修改的時間，如下：

If-Modified-Since 則是客戶端再次發起該請求時，攜帶上次請求返回的 Last-Modified 值，通過此欄位值告訴伺服器該資源上次請求返回的最後被修改時間。伺服器收到該請求，發現請求頭含有 If-Modified-Since 欄位，則會根據 If-Modified-Since 的欄位值與該資源在伺服器的最後被修改時間做對比，若伺服器的資源最後被修改時間大於 If-Modified-Since 的欄位值，則重新返回資源，狀態碼為 200；否則則返回 304，代表資源無更新，可繼續使用快取文件，如下：

Etag / If-None-Match

Etag 是伺服器響應請求時，返回當前資源文件的一個唯一標識(由伺服器生成)，如下：

If-None-Match 是客戶端再次發起該請求時，攜帶上次請求返回的唯一標識 Etag 值，通過此欄位值告訴伺服器該資源上次請求返回的唯一標識值。伺服器收到該請求後，發現該請求頭中含有 If-None-Match，則會根據 If-None-Match 的欄位值與該資源在伺服器的 Etag值做對比，一致則返回 304，代表資源無更新，繼續使用快取文件；不一致則重新返回資源文件，狀態碼為 200，如下：

註：Etag / If-None-Match 優先順序高於 Last-Modified / If-Modified-Since，同時存在則只有 Etag / If-None-Match 生效。

總結

強制快取優先於協商快取進行，若強制快取 Expires 和 Cache-Control 生效則直接使用快取，若不生效則進行協商快取（Last-Modified / If-Modified-Since 和 Etag / If-None-Match）。

協商快取由伺服器決定是否使用快取，若協商快取失效，那麼代表該請求的快取失效，重新獲取請求結果，再存入瀏覽器快取中；生效則返回 304，繼續使用快取，主要過程如下：

來源：https://heyingye.github.io/