HTTP Caching

快取規則

快取規則

範例如下,檔案可供所有設備快取,過期時間是兩年後。

Cache-control

如何決定要使用快取還是取得更新資源?

流程如下圖。

如何決定要使用快取還是取得新檔案?

說明

如何強迫瀏覽器更新資源?

方法一,變更資源的網址,例如加入 hash。相同網址之下,會讀取本地快取,所以改變網址即可,可解決資源未過期但想要更新的狀況。

以下三個網址對瀏覽器來說都是不一樣的,不會讀取本地快取,會重新要求資源。

https://www.sample.com.tw/assets/cute.png

https://www.sample.com.tw/assets/cute.png?123

https://www.sample.com.tw/assets/cute.v123.png?123

方法二,使用 ctrl + F5ctrl 並點擊瀏覽器的更新按鈕來強制更新,重新向伺服器請求所有資源,而不使用快取,因此可取得最新版本的內容。

Checklist

範例

資源未被快取。

200

資源來源是記憶體快取。

image from memory cache

資源來源是 HTTP 快取(HTTP Cache)又稱為磁碟快取(Disk Cache)。

image from disk cache

資源來源是記憶體快取,但使用 Hash 控制是否要強迫瀏覽器更新資源。

image from memory cache with hash

資源經 ETag 確認未更新,因此使用快取檔案。

304 not modified

對於各種快取的說明,可參考這篇,內含記憶體快取、Service Worker 快取、HTTP 快取和 Push 快取。

推薦閱讀

參考資料


HTTP Caching ETag 快取 效能調校 加載效能 Loading Performance cache 前端效能 系列文