spdyの話

SPDY の話

IIJ 大津繁樹 (@jovi0608)2012 年 7 月 5 日

HTML5 とか勉強会番外編- ブラウザとサーバの間を考えよう -

自己紹介• 大津繁樹 (@jovi0608, https://github.com/shigeki)

• 所属：インターネットイニシアティブ (IIJ) アプリケーション開発部戦略的開発室

• HTML5/Node.js/Kinect 等流行もの担当• 最近は Node.js コアの開発やってます。

最近 SPDY が話題です。

SPDY は Google, Inc の登録商標です。

SPDY を巡る動き2009/11 spdy/1 ドラフト公開、 spdy-dev 開始2010/01 TLS NPN 拡張 I-D リリース2011/01 Google サービスの 90% が SPDY 化完了2011/04 node-spdy リリース2011/12 FireFox11 開発版に SPDY 実装2012/01 HTTP/2.0 の議論開始 ( 現在 3 案提示中 )2012/03 Jetty SPDY サポート , twitter SPDY 化開始2012/04 Apache 向け mod_spdy 正式リリース2012/05 339 SSL 証明書が SPDY 化 (netcraft 調査 )2012/05 F5 Big-IP で SPDY サポート2012/06 nginx で SPDY サポート

SPDY の状況• 仕様

– spdy/3 リリース , spdy/4 議論開始 (DNS ・証明書プッシュ、 Proxy 設定）

– HTTP/2.0 議論開始 (MS も類似仕様を提出 )• 実装

– Chrome: spdy/2 実装済 (Ver4 から ) spdy/3 試験中– Android3.0 以降の標準ブラウザでもサポート– FireFox: 13 から default 有効 (spdy/2)– MS IE/Apple Safari ? Opera から仕様フィードバックが来た

• 効果測定– Google のベンチ (2009/11 ラボ環境 25 サイト約 2 倍 )– Google のベンチ (Chrome for Android で 1.3 倍 )– Jetty のベンチ 245msec 早くなった。– Akamai のベンチ 4.5% 早いだけ

最近のトピック（ Chrome Secure Proxy ）Chrome を「 Amazon Silk もどき」に、

引用元 SPDY & Secure Proxy Support in Google Chrome by Ilya Grigorikhttp://www.igvita.com/2012/06/25/spdy-and-secure-proxy-support-in-google-chrome/

Ｃｈｒｏｍｅと Proxy サーバ間を SPDY でつなぐ

実際にデモ

HTTP 高速化の試み

引用元： More Bandwidth Doesn’t Matter (much) by Mike Belshehttp://docs.google.com/a/chromium.org/viewer?a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2

HTML のページの読み込み時間の短縮には帯域増大より RTT 短縮の方が効果が大きい

SPDY vs HTTP

SPDY の特徴 (Google I/O 2012 セッション資料より引用 )

• 常に TLS の上で動作• ヘッダ圧縮をする• バイナリーのフレーム• フルデュプレックス、優先ストリームがあ

る• サーバプッシュが可能• TCP 接続が１つだけ• 少ないパケットですむ• 既存コンテンツを変える必要はない

引用元 Google I/O 2012 SPDY It's Here! ： http://r2---bru02t11.c.bigcache.googleapis.com/io2012/presentations/live%20to%20website/1201.pdf

SPDY に向かないこと (Google I/O 2012 セッション資料より引用 )

• 3rd party ドメインのリソースを多用しているサイト– それぞれのサイトへの接続オーバヘッドが発

生• 極めて少ないリソースで作られているサイ

ト– コネクション再利用の機会がなく効果が薄い。

• パケットロスが多発しているリンク– RTT が大きくて、パケットロスが多発してい

るところでは HTTP よりも性能が悪くなる。引用元 Google I/O 2012 SPDY It's Here! ： http://r2---bru02t11.c.bigcache.googleapis.com/io2012/presentations/live%20to%20website/1201.pdf

Data Frames Control Frames

1. SYN_STREAM2. SYN_REPLY3. RST_STREAM4. SETTINGS5. NOOP( spdy/3 で廃止 )6. PING7. GOAWAY8. HEADERS9. WINDOW_UPDATE10. CREDENTIAL

SPDY フレームの種類と役割

HTTP リクエスト・レスポンスヘッダの送受信に使う

HTTP リクエスト・レスポンスボディの送受信などで使う

その他 SPDY 通信制御情報のやり取りに使う

SSL ハンドシェイク

SYN_STREAM

SYN_REPLY

DATA Frame

GOAWAY

クライアントサーバー

NPN (Next Protocol Negotiation) を使って SPDY 利用バージョンを交換

HTTP リクエストヘッダ情報を送信

HTTP レスポンスヘッダ情報を送信

HTTP レスポンスボディを送信

SPDY ストリーム利用停止を通知

単純な SPDY のストリームフロー

SSL の TCP セッションは 1つだけ

0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1

1 version 1

Flags Length

X Stream-ID

X Associated-To-Stream-ID

Pri Unused Slot Number of Name/Value pairs (32bit)

Number of Name/Value pairs

Length of name (32bit)

Name (string)

Length of value (32bit)

Value (string)

SYN_STREAM (spdy/3)

Flags

0x01 FLAG_FIN

0x02 FLAG_UNIDIRECTIONAL圧縮データ

ServerPush 時のクライアントのストリーム

ID

優先度0-7

ServerPush 時は UNIDIRECTION

type

サーバ：偶数クライアント：

奇数

0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1

1 version 2

Flags Length

X Stream-ID

Number of Name/Value pairs

Length of name

Name

Length of value

Value

SYN_REPLY (spdy/3)

Flags

0x01 FLAG_FIN

圧縮データ

0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1

0 Stream-ID

Flags Length

Data

Data frames (spdy/3)

Flags

0x01 FLAG_FIN

0x02 FLAG_COMPRESS

SYN_STREAM

SYN_REPLY

DATA Frame

クライアントサーバー

HTTP リクエスト

HTTP レスポンス

SYN_STREAM

DATA Frame

SYN_STREAM

DATA Frame

この間にサーバが先読みレスポンスとデータを送りまくる

キャッシュ

キャッシュ

Server Push とは、

UNIDIRECTIONALで

assosicate-streamが必須

SPDY の性能を測る

Navigation Timing API で見るSPDY

DNS解決

TCP接続処理

HTTP Request/Response

DOM 処理時間 #1（同期 )

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

onLoad( 通常のJS処理 )

DOMContentLoaded loadEventEnd

DOMLoading

DOMComplete/onLoad

DNS解決： SPDY/SSL ともに同じだろうTCP: SSL のハンドシェイクは同じだが、再利用前提の SPDY は効果が

高い。HTTP リクエスト・レスポンス : ヘッダ圧縮の分だけ SPDY の効果が高い。

Server Push の影響も現れるだろう。DOM処理 (同期） :SPDY/SSL ともに同じだが Server Push の影響がこ

こで現れるだろう。DOM 処理（非同期） : イメージのダウンロードなど SPDY 効果が一番

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

単純なベンチ結果 (10iter.)上から、 SSL, SPDY/2, SPDY/2+push

画像 100 枚 SPDY/SSL=1.12, SPDY+push/SSL=1.48

画像 500 枚 SPDY/SSL=1.15, SPDY+push/SSL=0.85

Chrome 22.0 Canary実際にベンチをデモしてみます。

実際に測る（その１）

spdy/3 は node-spdy の spdy-v3 ブランチを使用。 Flow Control (WINDOW_UPDATE Stream) の受信で頻繁にエラーが発生しているので値は正確ではないかもしれないです。

実際に測る（その２）

SPDY の方が遅いこともしばしば

実際に測る

•実際にデモ

まとめ• SPDY は HTTP を高速化を目指すプロトコル• １つの TCP セッション内で任意の

key/value のデータ組をサーバ・クライアント間で双方向で多重化通信を行える。

• TLS と組み合わせることによって既存の通信との互換性が高い

• 多重化・優先度・フロー制御・サーバプッシュなど新しい機能も実現。

• SPDY によってどこまで高速になるかどうか– うーん、まだまだ検証や運用ノウハウが必要

（時間があれば、） SPDY プロトコルの中身を見る (SPDY/3)

SPDLAY にお世話になってます。https://github.com/tatsuhiro-t/spdylay

spdylay を使って SPDY の中身を見るwww.google.com サーバ編（その１）$ ./examples/spdycat -v https://www.google.com

[ 0.012] NPN select next protocol: the remote server offers: * spdy/3 * spdy/2 * http/1.1 NPN selected the protocol: spdy/3

[ 0.018] recv SETTINGS frame <version=3, flags=0, length=20> (niv=2) [4(1):100] [7(0):12288]

NPN でプロトコル情報の交換

google サーバから SDPY の設定情報が送られてくる

4: SETTINGS_MAX_CONCURRENT_STREAMS 最大同時アクティブなストリーム数 7: SETTINGS_INITIAL_WINDOW_SIZE ストリームの初期ウィンドウサイズ（バイト）

spdylay を使って SPDY の中身を見るwww.google.com サーバ編（その 2 ）

[ 0.018] send SYN_STREAM frame <version=3, flags=1, length=106> (stream_id=1, assoc_stream_id=0, pri=3) :host: www.google.com :method: GET :path: / :scheme: https :version: HTTP/1.1 accept: */* user-agent: spdylay/0.2.0

SYN_STREAM を使って HTTP リクエストヘッダ情報をサーバに送信


[ 0.057] recv SYN_REPLY frame <version=3, flags=0, length=558> (stream_id=1) :status: 302 Found :version: HTTP/1.1 cache-control: private content-length: 222 content-type: text/html; charset=UTF-8 date: Thu, 17 May 2012 01:24:23 GMT location: https://www.google.co.jp/ server: gws ( 以下略）

SYN_REPLY で HTTP レスポンスヘッダ情報がサーバから送られてくる


<HTML><HEAD><meta http-equiv="content-type" content="text/html;charset=utf-8"><TITLE>302 Moved</TITLE></HEAD><BODY><H1>302 Moved</H1>The document has moved<A HREF="https://www.google.co.jp/">here</A>.</BODY></HTML>[ 0.058] recv DATA frame (stream_id=1, flags=1, length=222)

[ 0.058] send GOAWAY frame <version=3, flags=0, length=8> (last_good_stream_id=0

Data フレームで HTTP レスポンスボディがサーバから送られてくる

SPDY終了

spdylay を使って SPDY の中身を見るChrome ブラウザ編（その 1 ）

./examples/spdyd --htdocs=. -v 3000 ./foo-key.pem ./foo-cert.pem

[id=2] [ 5.051] recv SYN_STREAM frame <version=3, flags=1, length=250> (stream_id=1, assoc_stream_id=0, pri=0) :host: unixjp:3000 :method: GET :path: / :scheme: https :version: HTTP/1.1 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-charset: Shift_JIS,utf-8;q=0.7,*;q=0.3 ( 以下略 )

[id=1] [ 5.046] closedThe negotiated next protocol: spdy/3

NPN でプロトコル情報の決定

SYN_STREAM を使って HTTP リクエストヘッダ情報が Chrome から送られてくる


[id=2] [ 5.052] send SETTINGS frame <version=3, flags=0, length=12> (niv=1) [4(0):100]

[id=2] [ 5.052] send SYN_REPLY frame <version=3, flags=0, length=109> (stream_id=1) :status: 200 OK :version: HTTP/1.1 cache-control: max-age=3600 content-length: 40 date: Thu, 17 May 2012 02:40:28 GMT last-modified: Mon, 14 May 2012 20:34:32 GMT server: spdyd spdylay/0.2.0

サーバから SETTINGS によって同時ストリーム数の設定

SYN_REPLY で HTTP レスポンスヘッダ情報を Chrome に送る


[id=2] [ 5.052] send DATA frame (stream_id=1, flags=0, length=40)[id=2] [ 5.053] send DATA frame (stream_id=1, flags=1, length=0)[id=2] [ 5.053] stream_id=1 closed

データフレームでレスポンスボディを送信最後のデータフレームは flag 1 (FLAG_FIN) を使ってストリームを終了させてます。

[id=2] [ 5.094] recv SYN_STREAM frame <version=3, flags=1, length=39> (stream_id=3, assoc_stream_id=0, pri=1) :host: unixjp:3000 :method: GET :path: /favicon.ico :scheme: https :version: HTTP/1.1 accept: */* accept-charset: Shift_JIS,utf-8;q=0.7,*;q=0.3 accept-encoding: gzip,deflate,sdch accept-language: en-US,en;q=0.8 user-agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.46 Safari/536.5


Chrome が favicon.ico を取りに来てるリクエスト


[id=2] [ 6.048] recv PING frame <version=3, flags=0, length=4> (unique_id=1)[id=2] [ 6.048] send PING frame <version=3, flags=0, length=4> (unique_id=1)

[id=2] [ 5.095] send SYN_REPLY frame <version=3, flags=0, length=33> (stream_id=3) :status: 404 Not Found :version: HTTP/1.1 content-encoding: gzip date: Thu, 17 May 2012 02:40:28 GMT server: spdyd spdylay/0.2.0

favicon なんて用意していないので 404 を返す SYN_REPLY

最後に Chrome から PING で SPDY の生存確認をしています。

spdyの話

Technology