有做過網頁速度優化的工程師，應該對於 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; 在想套用的 […]
[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” […]
[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 發生了路徑找不到或是執行上的錯誤，重裝即可重新設定。 如果仍然不行，可以試試 nvm unalias default 參考資料: https://github.com/creationix/nvm/issues/1245
[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 […]
[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 […]
[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 在網址列輸入 […]
[vscode] emmet 在 react(jsx) 無法自動產生 html
最近常在 vscode 寫 react，由於 react 是使用 jsx 語法，發現 emmet 在 js 檔案無法正常的自動產生 html 紀錄一下後來查到的解決方式 進入 vscode 的 Preference > User Settings 加入以下的設定 參考資料： https://github.com/Microsoft/vscode/issues/4962
[mac] 查詢正在使用的 port 及 process id
查詢目前使用中的 port 及 process id lsof -n -i | grep LISTEN 查詢特定 port 的服務，以 80 port 為例 lsof -n -i:80 | grep LISTEN 參考資料： https://stackoverflow.com/questions/4421633/who-is-listening-on-a-given-tcp-port-on-mac-os-x
[mysql] InnoDB: Table `mysql`.`innodb_table_stats` not found.
前陣子裝了 mysql，但似乎沒裝完整，導致執行 mysql 機器負載總是衝很高。 看了一下 mysql error.log InnoDB: Table `mysql`.`innodb_table_stats` not found. Table ‘performance_schema.session_variables’ doesn’t exist 嗯…連 show variables; 都無法執行 查了一下相關資料，用以下步驟即可解決。 強制更新 mysql mysql_upgrade -u root -p –force 重開 mysql sudo service mysql restart 參考資料： https://stackoverflow.com/questions/31967527/table-performance-schema-session-variables-doesnt-exist
[nginx] 錯誤，client intended to send too large body
之前因為把機器上原本的 apache 的 web server 換成 nginx，遇到了這個錯誤 client intended to send too large body 查了一下資料發現造成的原因為 web server 接收 request body 的大小設定 apache: LimitRequestBody 預設為 0(unlimit) nginx: client_max_body_size 預設為 1m 根據以下步驟更改一下 nginx 設定，就沒問題了 vim /etc/nginx/nginx.conf sudo sercie nginx reload 參考資料： https://craftcms.stackexchange.com/questions/2328/413-request-entity-too-large-error-with-uploading-a-file