[firefox] iframe 或頁面的內容會被 cache 住

前提: 在撰寫這篇文章時,所測試的 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 […]

Continue reading


[css] 搞懂 flex-grow, flex-shirk 及 flex-basis 三種屬性

在 CSS3 支援  flexbox 排版以後,相信許多人已經使用了 flexbox,還沒使用過的可以去玩 Flexbox Froggy 學習一下 XD 最近使用 flexbox 製作 RWD 網站時,順便弄清楚了 flex-basis, flex-grow , flex-shrink 在這邊紀錄一下 flex-basis 決定 flexbox 排版的 item 的初始寬/高(取決於 flex-direction 的方向). auto 預設值,根據 item 的內容決定寬/高 <width/height> 指定特定的寬/高,可以是數值也可以是比例. Q: flex-basis 和 width/height 有什麼不一樣? A: 當 flex-direction: row 時,flex-basis 會決定了 width. 當 flex-direction: column 時,flex-basis 會決定了 height.  備註: position: absolute 的 elment 因為不會是 flexbox 排版因此無法透過 […]

Continue reading


[nginx] proxy cache 設定

有做過網頁速度優化的工程師,應該對於 cache 相當熟悉,適當的增加 cache 可以大幅地減少 server 的負擔。 甚至在後端我們也常用 redis 去 cache 一些常用或計算負擔較重的資料. 在使用 nodejs 做開發時,我們時常會需要使用到 web server 的 reverse proxy 功能。 這篇主要想記錄如何開啟 nginx 的 proxy_cache,減少 Reverse Proxy Server 打到後面的 web server 的 request 數量,也是類似於 varnish 所做的功能   找到 nginx.conf 檔案,預設會在 /etc/nginx/nginx.conf 設定 cache 檔案的存放位置及 expired 等資訊,這邊先以 my_cache 為 key 去更新 cache proxy_cache_path /tmp/cache levels=1:2 keys_zone=my_cache:10m; 在想套用的 […]

Continue reading


[test] Nightwatch.js 如何每次執行測試都是全新的 session

之前寫過 Nightwatch.js 的 debug 血淚史,前一陣子有個需求是想用 Nightwatch.js來做各瀏覽器的速度測試,因此期望每次開啟的 session 都是個乾淨的 session (不要有 cache, cookie 等等…) 在這紀錄一下,如何設定各 driver 每次開啟都是全新的 session 前情提要: 本篇使用 [email protected] ((3.5.0以上可能會有不同的問題… 以下為 nightwatch 設定檔(nightwatch.json) 的 test_settings 部分 IE8 以上 “ie”: { “desiredCapabilities”: { “browserName” : “internet explorer”, “javascriptEnabled”: true, “acceptSslCerts”: true, “ie.ensureCleanSession”: true } } Safari “safari”: { “desiredCapabilities” : { “browserName” : “safari”, “javascriptEnabled” […]

Continue reading


[nodejs] nvm is not compatible with the npm config “prefix” option: currently set to ….

有次重開電腦後,terminal 就一直噴以下這個錯誤 nvm is not compatible with the npm config “prefix” option: currently set to “/usr/local” Run `npm config delete prefix` or `nvm use –delete-prefix v8.8.1 –silent` to unset it. 初步看起來像是 nvm 的 PATH 跑掉了,查了一下資料,在這紀錄一下如何解決 nvm uninstall v5.7.1 && nvm install v5.7.1 通常是某個版本的 node 發生了路徑找不到或是執行上的錯誤,重裝即可重新設定。   參考資料: https://github.com/creationix/nvm/issues/1245  

Continue reading


[http] Last-Modified, If-Modified-Since, ETag 和 If-None-Match 介紹

在上一篇介紹了  http 關於 cache 的 header ,但當 cache 過期或是需要 revalidate 時又是如何運作的呢? 此篇將介紹幾個常見的 revalidate 的 http header Last-Modified, If-Modified-Since (RFC 7232) request If-Modified-Since: 上次 Last-Modifed 回傳的時間 用於做 revalidate 時,檢查檔案在指定時間後是否有被變更,若有回傳 200 及新的檔案內容,反之則回傳 304 (Not Modified) 即可。 response: Last-Modified: 檔案在伺服器最後修改的時間 在 response 帶回此檔案上次在伺服器被修改的時間,以備做 revalidate 時發送的 timestamp。 實際上的使用情境會像是以下步驟: client 發 request 與伺服器要 image.png 檔案 server 回傳 Cache-Control: max-age=86400, no-cache ,  Last-Modified: Wed, 21 Oct 2018 […]

Continue reading


[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