1. Node.jsで SPDYのベンチマーク
体験サイトを作りました。
SPDY & WS 勉強会（仮）
2013年3月28日
IIJ 大津 繁樹

2. 自己紹介
• 所属：株式会社 インターネットイニシアティブ
• アプリケーション開発部 戦略的開発室
• Node.js, HTML5, Kinect, SPDY etc..
• 流行しそうなものを検証・評価してます。
• twitter: @jovi0608
• github: https://github.com/shigeki

3. 宣伝：
日経コミュニケーション 2月号（入門編） 3月号（技術編）

4. 今日のネタ
• node-spdy を使って、 SPDY のベンチマークを
体験できるサイトを作りました。
• spdy/3.1 (per-session flow control) のネタも考
えていましたが、やめました。
– 「twitterが spdy/3.1 の試験を始めてます」
– http://d.hatena.ne.jp/jovi0608/20130327/136435
7687

5. SPDYベンチマーク体験サイト
• ssl, spdy/3, spdy3+ server push で同じページが表示さ
れる時間を定量的に比較できます。(以前は spdy2 も
ベンチしていましたが、ブラウザがほぼspdy/3対応に
なったので取り止め）
• ベンチマークページは単に画像を並べただけ
• 画像数は １０～90。(100以上は後述）
• キャッシュしないようセッション化。
• ChromeはTCPをすぐ切らないのでベンチ終了後に0.5
秒後に強制切断。
• 手動ステップでベンチすることにより見え方の違いも
体験できます。
• 時間測定は、Navigation Timing API を使って取得。

6. Navigation Timing APIで見るSPDY
domContentLoaded
EventEnd loadEventStart
DOMLoading
DNS TCP HTTP DOM DOM onLoad
解決 接続 Request/ 処理時間#1 処理時間#2 (通常の
処理 Response （同期) (非同期・並列) JS処理)
 DNS解決： SPDY/SSL ともに同じだろう
 TCP: SSL のハンドシェイクは同じだが、再利用前提のSPDYは効果が高い。
 HTTPリクエスト・レスポンス: ヘッダ圧縮の分だけSPDYの効果が高い。Server
Push はここでコンテンツを送る。
 DOM処理(同期）:SPDY/SSLともに同じはずだが・・・ 。
 DOM処理（非同期）: イメージのダウンロードなどSPDY効果が一番現れるだ
ろう。
 onLoad: JSの処理部分だから同じだろう。

7. SPDYベンチマークサイト
https://spdy.iijplus.jp/

8. SPDYベンチマークのやり方
10～90枚の画
像数を選ぶ
手動の場合は
リンクをクリックして3種
類のベンチを進める

9. 幸せのドクターイエロー

10. 結果

11. で、速くなるの？
• 試してください。
• 速い場合もあるし、遅い場合もあります。
• 各フェーズの時間のかかり方を見ましょう。
• 手動で1つ・１つテストをすると spdy, spdy/3,
spdy/3+push で画像の見え方が違います。
• server push はそれほど効果がないかも…

12. デモ
https://spdy.iijplus.jp/

13. node-spdy と
Server Push の TIPS

14. node-spdyについて
• spdy v2/v3 対応。
• 開発者は Nodeコアの Fedor Indutny@voxser
• HEADERS、CREDENTIAL には未対応
• SETTING は、 MAX_CONCURRENT_STREAMS
と INITIAL_WINDOW_SIZE のみ対応
• node-v0.10 でも動作します。でも stream2 の
影響でバグがありそう。調査中。

15. Server Pushのフロー
/index.html
SYN_STREAM この間にサーバが
HTTPリクエスト
stream_id = 3 先読みさせるレスポ
ンスとデータをサー
SYN_STREAM バ側から送る
associated_stream = 3
unidirectional = true
/images/pic1.png
キャッシュ DATA Frame
クライアント
サーバー
SYN_STREAM
/images/pic2.png
キャッシュ DATA Frame
コンテンツがキャッ SYN_REPLY
シュされていれば新 HTTPレスポンス
しくリクエストしない。 DATA Frame

16. Server push が成功している証
SPDY_STREAM_ADOPTED_PUSH_STREAM

17. MAX_CONCURRENT_STREAMS
超えに注意
Chromeは最大同時ストリーム数が100