[http] http header, Cache-Control, Expires 用法說明

在優化網頁速度時,常會使用 cache 的機制來減少 server 負載, client 資源等待時間。 比如 server 前面會架一台 cdn 服務, cache 一些靜態檔案…等等。 server 可能會使用 redis, 來 cache 需要做大量計算的結果,降低負載。 這篇則是要介紹有哪些 http header 可以善用在 client 端(瀏覽器)來優化網頁速度,檢查是否有成功 cache 可以參考此篇文章 Expires 最早在 http 1.0 就存在的 header, 使用方式為 Expires[date] (日期格式必須符合 RFC1123) 例如: Expires: Wed, 5 Mar 2018 11:00:00 GMT 用法為設定一個確切的日期,當 client 端時間小於 response header (Expires) 時間時,則會使用 cache. 由於 client […]

Continue reading


[chrome] 如何檢查 request 是否有正確的 cache

最近在看 web front-end cache 相關的 http header 優化,順手寫了幾個測試網頁驗證。 順便來記錄一下如何驗證 chrome 瀏覽器有成功的 cache 了 request 打開瀏覽器的 dev tool network 頁籤並重新整理網頁後可以看到所有的 request, 如下圖 從 Size 欄位可以看到此頁所有的 request size, 若是從 cache  取得的則會顯示 (from disk cache) 點開此 request 的詳細 header 中也可以看到 cache (from disak cache) , 如下圖 另外值得注意的事,當在測試 cache 時,建議不要直接以網址列輸入直接測試 例如: 想測試 https://xxx/jquery.min.js 是否成功 cache 建議使用 https://xxx/index.html 裡面的 script src 去引入 jquery.min.js 在網址列輸入 […]

Continue reading