簡介：

瀏覽器快取分為強快取與協商快取，瀏覽器請求資源時，會先判斷該資源是否設定了強快取，

如果設定了強快取，且強快取時間沒有失效，則執行強快取，強快取不會向伺服器傳送請求，直接從快取中讀取資源，但是會返回200的狀態碼。

如果強快取設定的時間失效，且設定了協商快取，則執行協商快取，協商快取會發送請求詢問伺服器檔案是否有變動。

強快取：

強快取不會向伺服器傳送請求，直接從快取中讀取資源，返回200狀態碼。

強快取有 expires 和 cache-control 兩種。

瀏覽器第一次請求資源時，伺服器在返回頭response Header 中設定 expires 或者 cache-control 欄位。

當expires  和 cache-control 都存在時，cache-control 優先順序更高

expires：

是HTTP1.0控制網頁快取的欄位，值為一個時間戳，準確來講是格林尼治時間，伺服器返回該請求結果快取的到期時間，

再次傳送請求時，如果未超過過期時間，直接使用該快取，如果過期了則重新請求。

有個缺點，就是它判斷是否過期是用本地時間來判斷的，本地時間是可以自己修改的。

Cache-Control：

public：資源客戶端和伺服器都可以快取。

privite：資源只有客戶端可以快取。

no-cache：客戶端快取資源，但是是否快取需要經過協商快取來驗證。

no-store：不使用快取。

max-age：快取保質期。單位：秒

協商快取：

當強快取失效後，瀏覽器攜帶快取標識向伺服器傳送請求，由伺服器根據快取標識來決定是否使用快取的過程。

協商快取分為 Last-Modified 和   Etag 兩種。

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

Last-Modified

Last-Modified是伺服器響應請求時，返回該資原始檔在伺服器最後被修改的時間，Last-Modified屬性在返回頭中。

再次請求該資源時，瀏覽器會在請求頭中加入 If-Modified-Since 屬性，攜帶上次 Last-Modified的值，發給服務端。

伺服器收到該請求，發現請求頭含有If-Modified-Since欄位，則會根據If-Modified-Since的欄位值與該資源在伺服器的最後被修改時間做對比，

若伺服器的資源最後被修改時間大於If-Modified-Since的欄位值，則重新返回資源，狀態碼為200；否則則返回304，代表資源無更新，可繼續使用快取檔案。

Etag：

Etag是伺服器響應請求時，返回當前資原始檔的一個唯一標識，Etag 屬性在返回頭中。

再次請求該資源時，瀏覽器會在請求頭中加入 If-None-Match 屬性，攜帶上次 Etag 的值，發給服務端。

伺服器收到該請求後，發現該請求頭中含有If-None-Match，則會根據If-None-Match的欄位值與該資源在伺服器的Etag值做對比，

一致則返回304，代表資源無更新，繼續使用快取檔案；不一致則重新返回資原始檔，狀態碼為200。

重新整理對於強快取和協商快取的影響

1. 當ctrl+f5強制重新整理網頁時，直接從伺服器載入，跳過強快取和協商快取。

2. 當f5重新整理網頁時，跳過強快取，但是會檢查協商快取。

3. 瀏覽器位址列中寫入URL，回車 瀏覽器發現快取中有這個檔案了，不用繼續請求了，直接去快取拿。（最快）