前提: 在撰寫這篇文章時，所測試的 Firefox 版本為 70.0 也許之後版本就更改和 Chrome, Safari 行為一致也不無可能 記得當初使用 Firefox 5x.x 版時，就曾經踩過這個類似的雷，重現流程是 瀏覽一個有 iframe src 的 html 頁面 打開 dev tool 更改 iframe 中的任意內容 點擊頁面上的任一連結(導內/外都可以) 觸發瀏覽器上一頁行為 然後會發現 iframe 的內容仍然是你更改後的內容 在 Firefox 官方上也有許多 iframe cache 相關的 issue，像是以下: https://bugzilla.mozilla.org/show_bug.cgi?id=356558 https://bugzilla.mozilla.org/show_bug.cgi?id=1349921 當初有一系列的解決辦法: 為 iframe src 加上 cache-buster 為 iframe name 加上 cache-buster 為 iframe id 加上 cache-buster […]
在優化網頁速度時，常會使用 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 […]
最近在看 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 在網址列輸入 […]