使用 SPDY 配合 Nginx 或者 Node 加載文件的速度, 測試

單頁面應用文件增多時, 存在輕微過多阻塞頁面加載的狀況, 好比這樣:

(對雖然能夠考慮合併後調試, 但 RequireJS 合併並不快, 還要再考慮)

想到的一個方案是 SPDY 的請求合併功能, 好比這裏的例子, 沒有明顯的 Blocking
https://www.modspdy.com/world-flags/

參考目前 SPDY 的瀏覽器支持, 我原來覺得能夠在開發環境嘗試的
http://caniuse.com/spdy

基於 Nginx 的 SPDY 服務器

基本的配置是這樣的, 具體步驟請參考其餘文章,
測試的內容是一個有 20 個左右 JS 文件的 HTML 的加載:

server {
  listen 443 ssl spdy;
  ssl on;
  ssl_certificate app.crt;
  ssl_certificate_key app.key;

  server_name app.app;

  location / {
    root /app/;
    autoindex on;
  }
}

結果是:

單純 Nginx 使用 HTTP 的狀況:

Nginx 裏使用了 SPDY serve 靜態文件的狀況:

這個是後面的 Node 服務器 serve 靜態文件的狀況:

大體能夠看到幾點, 可能不夠準確..

• SPDY 的請求是同時發出的, 不像是 HTTP 發出時間呈現階梯狀, 圖上不夠明顯
• SPDY 中 blocking 的時間更長(但有上述的區別), 多是 SSL 協議緣由..?

使用 Node SPDY 服務器

網上找到了另外一個方案, 使用 Node spdy 模塊來加載文件
https://coderwall.com/p/2gfk4w
https://github.com/ericallam/spdy-with-server-push-tutorial

其中的策略是這樣的:
預先加載靜態資源文件, 固然, 還有證書之類的..
第一個請求訪問 / 路徑時, 把靜態的 JS 等等文件 push 到服務端,
res.end 訪問 / 對應的 HTML 文件,
而後, 等瀏覽器去取靜態資源時, 就能夠直接命中緩存, 加快速度.

我仿照這個方案, 寫了一些代碼, 咱們的項目開發環境存在上百個請求,
具體代碼不方便, repo 裏只是 SPDY 相關的代碼:
https://github.com/jiyinyiyong/spdy-reload-server

注意使用命令去掉證書使用的密碼, 不然 Node 啓動時會提示的:
http://webmasters.stackexchange.com/a/1254/37858
另外這裏我沒有走 Nginx, 而是 https://127.0.0.1:3000

這是不使用 SPDY 協議時的狀況:

使用了 SPDY 協議以後的狀況:

我遇到到的幾點, 圖上看到比較少:

• SPDY 使用後的確加快了, 但效果不明顯, 仍是有
• 靜態文件的 download 時間成了 0, 說明緩存起做用了
• 只有在 Chrome Canary 正常運行, 低版本 Chrome 會由於 push 而 crash
• Firefox 和 Safari 可能致使 Node 服務器報錯

另外我還注意到 Canary 訪問即使是 HTTP 也是比 Dev 版的 Chrome 快的... 不清楚爲何.

總結

• SPDY 能帶來速度的提高, 可是並不明顯, 反而改用 Canary 提高大一些
• 使用 Nginx SPDY 沒能加快, 而 Node 對文件作緩存取得必定的效果.
• 惋惜目前難以在開發環境用...

上面是個人一些嘗試, 感受不夠嚴謹, 並且裏邊細節也不有理解和不能解釋的... 等高人往深了挖一挖...