HTTP Caching

快取規則

Cache-control

圖片來源: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

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 快取。

推薦閱讀

參考資料


comments powered by Disqus