瀏覽器會將從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)，如下圖：
反之，若字串沒有match了，代表資源內容變更了，此時browser再重新擷取該資源即可。
建議font可善用CDN cache，分散又可降低server loading。
參考資料：
https://tools.ietf.org/html/rfc2616
https://tools.ietf.org/html/rfc7234
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching
https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Caching
https://medium.com/@codebyamir/a-web-developers-guide-to-browser-caching-cc41f3b73e7c
