張BCの隨筆: [Web] 初探Http Cache策略(cache-control)

2020年1月31日星期五

[Web] 初探Http Cache策略(cache-control)

前言：
瀏覽器會將從server下載回來的靜態檔案做快取，
好處是節省頻寬與資源，加快瀏覽速度。
壞處是需要針對存取資源做適當的快取配置，
讓client在瀏覽網頁的速度與資源的更新取得平衡。

作法：
除了更新資源檔案的檔名外，
一般都是從HTTP/1.1 header中的cache-control指令下手，
設定max-age(單位為秒數)，讓browser定期跟server擷取資源，
不過各browser作法略有不同。
FireFox從第2次開始，會自行帶max-age=0給server，

Chrome不會自行帶max-age的指令，還是需server設定，
且需再增加no-cache指令，讓browser發request來重新驗證資源是否更新，
否則Chrome仍然使用local cache。

max-age雖然可讓browser定期擷取資源，但若資源內容沒有變動，
也沒有下載的必要，因此會搭配ETag指令：
server會依快取的檔案內容產出一字串，回應給browser，
之後browser送出request會夾帶If-None-Match指令，如果字串比對一致，
則回傳status code 304(表Not Modified)，如下圖：