• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Node.js で SPDYのベンチマーク体験サイトを作りました
 

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

on

  • 4,660 views

 

Statistics

Views

Total Views
4,660
Views on SlideShare
4,352
Embed Views
308

Actions

Likes
7
Downloads
9
Comments
0

2 Embeds 308

http://connpass.com 239
https://twitter.com 69

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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/136435 7687
    • SPDYベンチマーク体験サイト• ssl, spdy/3, spdy3+ server push で同じページが表示さ れる時間を定量的に比較できます。(以前は spdy2 も ベンチしていましたが、ブラウザがほぼspdy/3対応に なったので取り止め)• ベンチマークページは単に画像を並べただけ• 画像数は 10~90。(100以上は後述)• キャッシュしないようセッション化。• ChromeはTCPをすぐ切らないのでベンチ終了後に0.5 秒後に強制切断。• 手動ステップでベンチすることにより見え方の違いも 体験できます。• 時間測定は、Navigation Timing API を使って取得。
    • Navigation Timing APIで見るSPDY domContentLoaded EventEnd loadEventStart DOMLoadingDNS 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の処理部分だから同じだろう。
    • SPDYベンチマークサイト https://spdy.iijplus.jp/
    • SPDYベンチマークのやり方 10~90枚の画 像数を選ぶ 手動の場合は リンクをクリックして3種 類のベンチを進める
    • 幸せのドクターイエロー
    • 結果
    • で、速くなるの?• 試してください。• 速い場合もあるし、遅い場合もあります。• 各フェーズの時間のかかり方を見ましょう。• 手動で1つ・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 の 影響でバグがありそう。調査中。
    • 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
    • Server push が成功している証 SPDY_STREAM_ADOPTED_PUSH_STREAM
    • MAX_CONCURRENT_STREAMS 超えに注意Chromeは最大同時ストリーム数が100