Node.jsで SPDYのベンチマーク体験サイトを作りました。

SPDY & WS 勉強会（仮） 2013年3月28日

IIJ 大津 繁樹

自己紹介

• 所属：株式会社 インターネットイニシアティブ

• アプリケーション開発部 戦略的開発室

• Node.js, HTML5, Kinect, SPDY etc..

• 流行しそうなものを検証・評価してます。

• twitter: @jovi0608

• github: https://github.com/shigeki

宣伝：

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

今日のネタ • node-spdy を使って、 SPDY のベンチマークを体験できるサイトを作りました。

• spdy/3.1 (per-session flow control) のネタも考えていましたが、やめました。

– 「twitterが spdy/3.1 の試験を始めてます」

– http://d.hatena.ne.jp/jovi0608/20130327/1364357687

SPDYベンチマーク体験サイト • ssl, spdy/3, spdy3+ server push で同じページが表示される時間を定量的に比較できます。(以前は spdy2 もベンチしていましたが、ブラウザがほぼspdy/3対応になったので取り止め）

• ベンチマークページは単に画像を並べただけ

• 画像数は １０～90。(100以上は後述）

• キャッシュしないようセッション化。

• ChromeはTCPをすぐ切らないのでベンチ終了後に0.5秒後に強制切断。

• 手動ステップでベンチすることにより見え方の違いも体験できます。

• 時間測定は、Navigation Timing API を使って取得。

Navigation Timing APIで見るSPDY

DNS 解決

TCP 接続 処理

HTTP Request/ Response

DOM 処理時間#1 （同期)

DOM 処理時間#2 (非同期・並列)

onLoad (通常の JS処理)

domContentLoadedEventEnd loadEventStart

DOMLoading

DNS解決： SPDY/SSL ともに同じだろう TCP: SSL のハンドシェイクは同じだが、再利用前提のSPDYは効果が高い。 HTTPリクエスト・レスポンス: ヘッダ圧縮の分だけSPDYの効果が高い。Server

Push はここでコンテンツを送る。 DOM処理(同期）:SPDY/SSLともに同じはずだが・・・ 。 DOM処理（非同期）: イメージのダウンロードなどSPDY効果が一番現れるだろう。

onLoad: JSの処理部分だから同じだろう。

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

SPDYベンチマークのやり方

10～90枚の画像数を選ぶ

手動の場合は リンクをクリックして3種類のベンチを進める

幸せのドクターイエロー

結果

で、速くなるの？

• 試してください。

• 速い場合もあるし、遅い場合もあります。

• 各フェーズの時間のかかり方を見ましょう。

• 手動で1つ・１つテストをすると spdy, spdy/3, spdy/3+push で画像の見え方が違います。

• server push はそれほど効果がないかも…

デモ

https://spdy.iijplus.jp/

node-spdy と Server Push の TIPS

node-spdyについて

• spdy v2/v3 対応。

• 開発者は Nodeコアの Fedor Indutny@voxser

• HEADERS、CREDENTIAL には未対応

• SETTING は、 MAX_CONCURRENT_STREAMS と INITIAL_WINDOW_SIZE のみ対応

• node-v0.10 でも動作します。でも stream2 の影響でバグがありそう。調査中。

SYN_STREAM stream_id = 3

SYN_REPLY

DATA Frame

クライアント サーバー

HTTPリクエスト

HTTPレスポンス

SYN_STREAM associated_stream = 3 unidirectional = true

DATA Frame

SYN_STREAM

DATA Frame

この間にサーバが先読みさせるレスポンスとデータをサーバ側から送る

キャッシュ

キャッシュ

Server Pushのフロー

/images/pic1.png

/images/pic2.png

/index.html

コンテンツがキャッシュされていれば新しくリクエストしない。

Server push が成功している証 SPDY_STREAM_ADOPTED_PUSH_STREAM

MAX_CONCURRENT_STREAMS 超えに注意

Chromeは最大同時ストリーム数が100