SlideShare a Scribd company logo
1 of 17
Download to read offline
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

       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の処理部分だから同じだろう。
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

More Related Content

What's hot

「Windows Azure でスーパーコンピューティング!」for Microsoft MVP camp 2014 大阪会場
「Windows Azure でスーパーコンピューティング!」for Microsoft MVP camp 2014 大阪会場「Windows Azure でスーパーコンピューティング!」for Microsoft MVP camp 2014 大阪会場
「Windows Azure でスーパーコンピューティング!」for Microsoft MVP camp 2014 大阪会場幸智 Yukinori 黒田 Kuroda
 
非エンジニアでもわかる
非エンジニアでもわかる非エンジニアでもわかる
非エンジニアでもわかるssuser33820e
 
SSHの便利な使い方〜マイナーな小技編〜
SSHの便利な使い方〜マイナーな小技編〜SSHの便利な使い方〜マイナーな小技編〜
SSHの便利な使い方〜マイナーな小技編〜ktateish
 
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)Yuuki Namikawa
 
クロスドメイン処理
クロスドメイン処理クロスドメイン処理
クロスドメイン処理Yoshifumi Sato
 
ngx_small_lightで動的サムネイル生成 #yapcasia2012
ngx_small_lightで動的サムネイル生成 #yapcasia2012ngx_small_lightで動的サムネイル生成 #yapcasia2012
ngx_small_lightで動的サムネイル生成 #yapcasia2012Tatsuhiko Kubo
 
ngx_small_light at 第2回闇鍋プログラミング勉強会
ngx_small_light at 第2回闇鍋プログラミング勉強会ngx_small_light at 第2回闇鍋プログラミング勉強会
ngx_small_light at 第2回闇鍋プログラミング勉強会Tatsuhiko Kubo
 
開発者なのに運用で手がいっぱい? そんなあなたに贈る、 クラウド時代に最適な OSS の RDBMS ! Azure Database for MySQL...
開発者なのに運用で手がいっぱい? そんなあなたに贈る、 クラウド時代に最適な OSS の RDBMS ! Azure Database for MySQL...開発者なのに運用で手がいっぱい? そんなあなたに贈る、 クラウド時代に最適な OSS の RDBMS ! Azure Database for MySQL...
開発者なのに運用で手がいっぱい? そんなあなたに贈る、 クラウド時代に最適な OSS の RDBMS ! Azure Database for MySQL...Suguru Ito
 
TIME_WAITに関する話
TIME_WAITに関する話TIME_WAITに関する話
TIME_WAITに関する話Takanori Sejima
 
MySQLやSSDとかの話 後編
MySQLやSSDとかの話 後編MySQLやSSDとかの話 後編
MySQLやSSDとかの話 後編Takanori Sejima
 
60分でつかった気になるMicrosoft Azure
60分でつかった気になるMicrosoft Azure 60分でつかった気になるMicrosoft Azure
60分でつかった気になるMicrosoft Azure Kazumi Hirose
 
ちゃんとWeb会議
ちゃんとWeb会議ちゃんとWeb会議
ちゃんとWeb会議Masayuki Abe
 
クラウドデザイン パターンに見る クラウドファーストな アプリケーション設計 Data Management編
クラウドデザイン パターンに見るクラウドファーストなアプリケーション設計 Data Management編クラウドデザイン パターンに見るクラウドファーストなアプリケーション設計 Data Management編
クラウドデザイン パターンに見る クラウドファーストな アプリケーション設計 Data Management編Takekazu Omi
 
MySQLやSSDとかの話 その後
MySQLやSSDとかの話 その後MySQLやSSDとかの話 その後
MySQLやSSDとかの話 その後Takanori Sejima
 

What's hot (20)

「Windows Azure でスーパーコンピューティング!」for Microsoft MVP camp 2014 大阪会場
「Windows Azure でスーパーコンピューティング!」for Microsoft MVP camp 2014 大阪会場「Windows Azure でスーパーコンピューティング!」for Microsoft MVP camp 2014 大阪会場
「Windows Azure でスーパーコンピューティング!」for Microsoft MVP camp 2014 大阪会場
 
非エンジニアでもわかる
非エンジニアでもわかる非エンジニアでもわかる
非エンジニアでもわかる
 
SSHの便利な使い方〜マイナーな小技編〜
SSHの便利な使い方〜マイナーな小技編〜SSHの便利な使い方〜マイナーな小技編〜
SSHの便利な使い方〜マイナーな小技編〜
 
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)
 
クロスドメイン処理
クロスドメイン処理クロスドメイン処理
クロスドメイン処理
 
OSC 2012.Cloud
OSC 2012.CloudOSC 2012.Cloud
OSC 2012.Cloud
 
ngx_small_lightで動的サムネイル生成 #yapcasia2012
ngx_small_lightで動的サムネイル生成 #yapcasia2012ngx_small_lightで動的サムネイル生成 #yapcasia2012
ngx_small_lightで動的サムネイル生成 #yapcasia2012
 
ngx_small_light at 第2回闇鍋プログラミング勉強会
ngx_small_light at 第2回闇鍋プログラミング勉強会ngx_small_light at 第2回闇鍋プログラミング勉強会
ngx_small_light at 第2回闇鍋プログラミング勉強会
 
Windows Azure Community Open Day 2012
Windows Azure   Community Open Day 2012Windows Azure   Community Open Day 2012
Windows Azure Community Open Day 2012
 
「Windows Azureで HPC 」 for JAZUG 2013年9月
「Windows Azureで HPC 」 for JAZUG 2013年9月「Windows Azureで HPC 」 for JAZUG 2013年9月
「Windows Azureで HPC 」 for JAZUG 2013年9月
 
開発者なのに運用で手がいっぱい? そんなあなたに贈る、 クラウド時代に最適な OSS の RDBMS ! Azure Database for MySQL...
開発者なのに運用で手がいっぱい? そんなあなたに贈る、 クラウド時代に最適な OSS の RDBMS ! Azure Database for MySQL...開発者なのに運用で手がいっぱい? そんなあなたに贈る、 クラウド時代に最適な OSS の RDBMS ! Azure Database for MySQL...
開発者なのに運用で手がいっぱい? そんなあなたに贈る、 クラウド時代に最適な OSS の RDBMS ! Azure Database for MySQL...
 
TIME_WAITに関する話
TIME_WAITに関する話TIME_WAITに関する話
TIME_WAITに関する話
 
MySQLやSSDとかの話 後編
MySQLやSSDとかの話 後編MySQLやSSDとかの話 後編
MySQLやSSDとかの話 後編
 
60分でつかった気になるMicrosoft Azure
60分でつかった気になるMicrosoft Azure 60分でつかった気になるMicrosoft Azure
60分でつかった気になるMicrosoft Azure
 
0511 lt
0511 lt0511 lt
0511 lt
 
appengine4java-scaleout
appengine4java-scaleoutappengine4java-scaleout
appengine4java-scaleout
 
20110301 Mongo Tokyo
20110301 Mongo Tokyo20110301 Mongo Tokyo
20110301 Mongo Tokyo
 
ちゃんとWeb会議
ちゃんとWeb会議ちゃんとWeb会議
ちゃんとWeb会議
 
クラウドデザイン パターンに見る クラウドファーストな アプリケーション設計 Data Management編
クラウドデザイン パターンに見るクラウドファーストなアプリケーション設計 Data Management編クラウドデザイン パターンに見るクラウドファーストなアプリケーション設計 Data Management編
クラウドデザイン パターンに見る クラウドファーストな アプリケーション設計 Data Management編
 
MySQLやSSDとかの話 その後
MySQLやSSDとかの話 その後MySQLやSSDとかの話 その後
MySQLやSSDとかの話 その後
 

Viewers also liked

SPDYの中身を見てみよう
SPDYの中身を見てみようSPDYの中身を見てみよう
SPDYの中身を見てみようshigeki_ohtsu
 
HTTP/2.0 HPAC-03 エンコーディング手法 by tatsuhiro_t
HTTP/2.0 HPAC-03 エンコーディング手法 by tatsuhiro_tHTTP/2.0 HPAC-03 エンコーディング手法 by tatsuhiro_t
HTTP/2.0 HPAC-03 エンコーディング手法 by tatsuhiro_tshigeki_ohtsu
 
httpbis interim@チューリッヒ レポート
httpbis interim@チューリッヒ レポートhttpbis interim@チューリッヒ レポート
httpbis interim@チューリッヒ レポートshigeki_ohtsu
 
Node の HTTP/2.0 モジュール iij-http2 の実装苦労話
Node の HTTP/2.0 モジュール iij-http2 の実装苦労話Node の HTTP/2.0 モジュール iij-http2 の実装苦労話
Node の HTTP/2.0 モジュール iij-http2 の実装苦労話shigeki_ohtsu
 
第43回HTML5とか勉強会 SPDY/QUICデモ
第43回HTML5とか勉強会 SPDY/QUICデモ第43回HTML5とか勉強会 SPDY/QUICデモ
第43回HTML5とか勉強会 SPDY/QUICデモshigeki_ohtsu
 
httpbis interim@シアトル レポート (第2回HTTP/2.0接続試験)
httpbis interim@シアトル レポート(第2回HTTP/2.0接続試験)httpbis interim@シアトル レポート(第2回HTTP/2.0接続試験)
httpbis interim@シアトル レポート (第2回HTTP/2.0接続試験)shigeki_ohtsu
 
HTTP/2.0がもたらす Webサービスの進化(後半)
HTTP/2.0がもたらすWebサービスの進化(後半)HTTP/2.0がもたらすWebサービスの進化(後半)
HTTP/2.0がもたらす Webサービスの進化(後半)shigeki_ohtsu
 
node-gypを使ったネイティブモジュールの作成
node-gypを使ったネイティブモジュールの作成node-gypを使ったネイティブモジュールの作成
node-gypを使ったネイティブモジュールの作成shigeki_ohtsu
 
Node-v0.12のTLSを256倍使いこなす方法
Node-v0.12のTLSを256倍使いこなす方法Node-v0.12のTLSを256倍使いこなす方法
Node-v0.12のTLSを256倍使いこなす方法shigeki_ohtsu
 
Node-v0.12の新機能について
Node-v0.12の新機能についてNode-v0.12の新機能について
Node-v0.12の新機能についてshigeki_ohtsu
 
Node最新トピックス
Node最新トピックスNode最新トピックス
Node最新トピックスshigeki_ohtsu
 
HTTP/2の現状とこれから
HTTP/2の現状とこれからHTTP/2の現状とこれから
HTTP/2の現状とこれからshigeki_ohtsu
 
ピッチをする前に知っておきたかったこと スタートアップの資金調達
ピッチをする前に知っておきたかったこと スタートアップの資金調達ピッチをする前に知っておきたかったこと スタートアップの資金調達
ピッチをする前に知っておきたかったこと スタートアップの資金調達Takaaki Umada
 
資金調達入門“以前” スタートアップが資金調達の前に考えること
資金調達入門“以前” スタートアップが資金調達の前に考えること資金調達入門“以前” スタートアップが資金調達の前に考えること
資金調達入門“以前” スタートアップが資金調達の前に考えることTakaaki Umada
 

Viewers also liked (16)

SPDYの中身を見てみよう
SPDYの中身を見てみようSPDYの中身を見てみよう
SPDYの中身を見てみよう
 
HTTP/2.0 HPAC-03 エンコーディング手法 by tatsuhiro_t
HTTP/2.0 HPAC-03 エンコーディング手法 by tatsuhiro_tHTTP/2.0 HPAC-03 エンコーディング手法 by tatsuhiro_t
HTTP/2.0 HPAC-03 エンコーディング手法 by tatsuhiro_t
 
httpbis interim@チューリッヒ レポート
httpbis interim@チューリッヒ レポートhttpbis interim@チューリッヒ レポート
httpbis interim@チューリッヒ レポート
 
Node の HTTP/2.0 モジュール iij-http2 の実装苦労話
Node の HTTP/2.0 モジュール iij-http2 の実装苦労話Node の HTTP/2.0 モジュール iij-http2 の実装苦労話
Node の HTTP/2.0 モジュール iij-http2 の実装苦労話
 
第43回HTML5とか勉強会 SPDY/QUICデモ
第43回HTML5とか勉強会 SPDY/QUICデモ第43回HTML5とか勉強会 SPDY/QUICデモ
第43回HTML5とか勉強会 SPDY/QUICデモ
 
httpbis interim@シアトル レポート (第2回HTTP/2.0接続試験)
httpbis interim@シアトル レポート(第2回HTTP/2.0接続試験)httpbis interim@シアトル レポート(第2回HTTP/2.0接続試験)
httpbis interim@シアトル レポート (第2回HTTP/2.0接続試験)
 
HTTP/2.0がもたらす Webサービスの進化(後半)
HTTP/2.0がもたらすWebサービスの進化(後半)HTTP/2.0がもたらすWebサービスの進化(後半)
HTTP/2.0がもたらす Webサービスの進化(後半)
 
node-gypを使ったネイティブモジュールの作成
node-gypを使ったネイティブモジュールの作成node-gypを使ったネイティブモジュールの作成
node-gypを使ったネイティブモジュールの作成
 
Node-v0.12のTLSを256倍使いこなす方法
Node-v0.12のTLSを256倍使いこなす方法Node-v0.12のTLSを256倍使いこなす方法
Node-v0.12のTLSを256倍使いこなす方法
 
Node-v0.12の新機能について
Node-v0.12の新機能についてNode-v0.12の新機能について
Node-v0.12の新機能について
 
Node最新トピックス
Node最新トピックスNode最新トピックス
Node最新トピックス
 
HTTP/2の現状とこれから
HTTP/2の現状とこれからHTTP/2の現状とこれから
HTTP/2の現状とこれから
 
Stream2の基本
Stream2の基本Stream2の基本
Stream2の基本
 
ピッチをする前に知っておきたかったこと スタートアップの資金調達
ピッチをする前に知っておきたかったこと スタートアップの資金調達ピッチをする前に知っておきたかったこと スタートアップの資金調達
ピッチをする前に知っておきたかったこと スタートアップの資金調達
 
資金調達入門“以前” スタートアップが資金調達の前に考えること
資金調達入門“以前” スタートアップが資金調達の前に考えること資金調達入門“以前” スタートアップが資金調達の前に考えること
資金調達入門“以前” スタートアップが資金調達の前に考えること
 
Node js 入門
Node js 入門Node js 入門
Node js 入門
 

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

2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会tama200x Kobayashi
 
WebAppDev勉強会 #1 at cafe? IKAGAWA DO
WebAppDev勉強会 #1 at cafe? IKAGAWA DOWebAppDev勉強会 #1 at cafe? IKAGAWA DO
WebAppDev勉強会 #1 at cafe? IKAGAWA DOKohei Noda
 
Gangliaはじめました
GangliaはじめましたGangliaはじめました
Gangliaはじめましたyuzorock
 
20120611 aws meister-reloaded-cloud-front-public
20120611 aws meister-reloaded-cloud-front-public20120611 aws meister-reloaded-cloud-front-public
20120611 aws meister-reloaded-cloud-front-publicAmazon Web Services Japan
 
泥臭い運用から、プログラマブルインフラ構築(に行きたい)
泥臭い運用から、プログラマブルインフラ構築(に行きたい) 泥臭い運用から、プログラマブルインフラ構築(に行きたい)
泥臭い運用から、プログラマブルインフラ構築(に行きたい) Akihiro Kuwano
 
20150221 めとべや東京-プライベートコード共有サービス
20150221 めとべや東京-プライベートコード共有サービス20150221 めとべや東京-プライベートコード共有サービス
20150221 めとべや東京-プライベートコード共有サービスTakayoshi Tanaka
 
[db tech showcase Tokyo 2014] D33: Prestoで実現するインタラクティブクエリ by トレジャーデータ株式会社 斉藤太郎
[db tech showcase Tokyo 2014] D33: Prestoで実現するインタラクティブクエリ  by トレジャーデータ株式会社 斉藤太郎[db tech showcase Tokyo 2014] D33: Prestoで実現するインタラクティブクエリ  by トレジャーデータ株式会社 斉藤太郎
[db tech showcase Tokyo 2014] D33: Prestoで実現するインタラクティブクエリ by トレジャーデータ株式会社 斉藤太郎Insight Technology, Inc.
 
LambdaとMobileの美味しいかもしれない関係
LambdaとMobileの美味しいかもしれない関係LambdaとMobileの美味しいかもしれない関係
LambdaとMobileの美味しいかもしれない関係Hiraku Komuro
 
AutoScaling & SpotInstance Handson
AutoScaling & SpotInstance HandsonAutoScaling & SpotInstance Handson
AutoScaling & SpotInstance HandsonMakoto Uehara
 
CDNの仕組み(JANOG36)
CDNの仕組み(JANOG36)CDNの仕組み(JANOG36)
CDNの仕組み(JANOG36)J-Stream Inc.
 
Prestoで実現するインタラクティブクエリ - dbtech showcase 2014 Tokyo
Prestoで実現するインタラクティブクエリ - dbtech showcase 2014 TokyoPrestoで実現するインタラクティブクエリ - dbtech showcase 2014 Tokyo
Prestoで実現するインタラクティブクエリ - dbtech showcase 2014 TokyoTreasure Data, Inc.
 
S3とSNSで動画機能をつくる話
S3とSNSで動画機能をつくる話S3とSNSで動画機能をつくる話
S3とSNSで動画機能をつくる話Ahmad Shiina
 
The overview of Server-ide Bulk Loader
 The overview of Server-ide Bulk Loader The overview of Server-ide Bulk Loader
The overview of Server-ide Bulk LoaderTreasure Data, Inc.
 
「ビジネス活用事例で学ぶ データサイエンス入門」輪読会#7資料
「ビジネス活用事例で学ぶ データサイエンス入門」輪読会#7資料 「ビジネス活用事例で学ぶ データサイエンス入門」輪読会#7資料
「ビジネス活用事例で学ぶ データサイエンス入門」輪読会#7資料 Shintaro Nomura
 
Google App Engineとその影響(補足)
Google App Engineとその影響(補足)Google App Engineとその影響(補足)
Google App Engineとその影響(補足)なおき きしだ
 
Inside mobage platform
Inside mobage platformInside mobage platform
Inside mobage platformToru Yamaguchi
 
How to Make Own Framework built on OWIN
How to Make Own Framework built on OWINHow to Make Own Framework built on OWIN
How to Make Own Framework built on OWINYoshifumi Kawai
 
Azure Stack HCI - パフォーマンス履歴 と Azure Monitor
Azure Stack HCI - パフォーマンス履歴 と Azure MonitorAzure Stack HCI - パフォーマンス履歴 と Azure Monitor
Azure Stack HCI - パフォーマンス履歴 と Azure MonitorHiroshi Matsumoto
 

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

SPDYの話
SPDYの話SPDYの話
SPDYの話
 
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
 
WebAppDev勉強会 #1 at cafe? IKAGAWA DO
WebAppDev勉強会 #1 at cafe? IKAGAWA DOWebAppDev勉強会 #1 at cafe? IKAGAWA DO
WebAppDev勉強会 #1 at cafe? IKAGAWA DO
 
Gangliaはじめました
GangliaはじめましたGangliaはじめました
Gangliaはじめました
 
20120611 aws meister-reloaded-cloud-front-public
20120611 aws meister-reloaded-cloud-front-public20120611 aws meister-reloaded-cloud-front-public
20120611 aws meister-reloaded-cloud-front-public
 
泥臭い運用から、プログラマブルインフラ構築(に行きたい)
泥臭い運用から、プログラマブルインフラ構築(に行きたい) 泥臭い運用から、プログラマブルインフラ構築(に行きたい)
泥臭い運用から、プログラマブルインフラ構築(に行きたい)
 
20150221 めとべや東京-プライベートコード共有サービス
20150221 めとべや東京-プライベートコード共有サービス20150221 めとべや東京-プライベートコード共有サービス
20150221 めとべや東京-プライベートコード共有サービス
 
[db tech showcase Tokyo 2014] D33: Prestoで実現するインタラクティブクエリ by トレジャーデータ株式会社 斉藤太郎
[db tech showcase Tokyo 2014] D33: Prestoで実現するインタラクティブクエリ  by トレジャーデータ株式会社 斉藤太郎[db tech showcase Tokyo 2014] D33: Prestoで実現するインタラクティブクエリ  by トレジャーデータ株式会社 斉藤太郎
[db tech showcase Tokyo 2014] D33: Prestoで実現するインタラクティブクエリ by トレジャーデータ株式会社 斉藤太郎
 
LambdaとMobileの美味しいかもしれない関係
LambdaとMobileの美味しいかもしれない関係LambdaとMobileの美味しいかもしれない関係
LambdaとMobileの美味しいかもしれない関係
 
AutoScaling & SpotInstance Handson
AutoScaling & SpotInstance HandsonAutoScaling & SpotInstance Handson
AutoScaling & SpotInstance Handson
 
CDNの仕組み(JANOG36)
CDNの仕組み(JANOG36)CDNの仕組み(JANOG36)
CDNの仕組み(JANOG36)
 
Prestoで実現するインタラクティブクエリ - dbtech showcase 2014 Tokyo
Prestoで実現するインタラクティブクエリ - dbtech showcase 2014 TokyoPrestoで実現するインタラクティブクエリ - dbtech showcase 2014 Tokyo
Prestoで実現するインタラクティブクエリ - dbtech showcase 2014 Tokyo
 
S3とSNSで動画機能をつくる話
S3とSNSで動画機能をつくる話S3とSNSで動画機能をつくる話
S3とSNSで動画機能をつくる話
 
The overview of Server-ide Bulk Loader
 The overview of Server-ide Bulk Loader The overview of Server-ide Bulk Loader
The overview of Server-ide Bulk Loader
 
「ビジネス活用事例で学ぶ データサイエンス入門」輪読会#7資料
「ビジネス活用事例で学ぶ データサイエンス入門」輪読会#7資料 「ビジネス活用事例で学ぶ データサイエンス入門」輪読会#7資料
「ビジネス活用事例で学ぶ データサイエンス入門」輪読会#7資料
 
Data Lake ハンズオン
Data Lake ハンズオンData Lake ハンズオン
Data Lake ハンズオン
 
Google App Engineとその影響(補足)
Google App Engineとその影響(補足)Google App Engineとその影響(補足)
Google App Engineとその影響(補足)
 
Inside mobage platform
Inside mobage platformInside mobage platform
Inside mobage platform
 
How to Make Own Framework built on OWIN
How to Make Own Framework built on OWINHow to Make Own Framework built on OWIN
How to Make Own Framework built on OWIN
 
Azure Stack HCI - パフォーマンス履歴 と Azure Monitor
Azure Stack HCI - パフォーマンス履歴 と Azure MonitorAzure Stack HCI - パフォーマンス履歴 と Azure Monitor
Azure Stack HCI - パフォーマンス履歴 と Azure Monitor
 

More from shigeki_ohtsu

SSL/TLSの基礎と最新動向
SSL/TLSの基礎と最新動向SSL/TLSの基礎と最新動向
SSL/TLSの基礎と最新動向shigeki_ohtsu
 
Technical Overview of QUIC
Technical  Overview of QUICTechnical  Overview of QUIC
Technical Overview of QUICshigeki_ohtsu
 
httpbis interim とhttp2.0相互接続試験の話
httpbis interim とhttp2.0相互接続試験の話httpbis interim とhttp2.0相互接続試験の話
httpbis interim とhttp2.0相互接続試験の話shigeki_ohtsu
 
そうだったのか! よくわかる process.nextTick() node.jsのイベントループを理解する
そうだったのか! よくわかる process.nextTick() node.jsのイベントループを理解するそうだったのか! よくわかる process.nextTick() node.jsのイベントループを理解する
そうだったのか! よくわかる process.nextTick() node.jsのイベントループを理解するshigeki_ohtsu
 

More from shigeki_ohtsu (6)

TLS, HTTP/2演習
TLS, HTTP/2演習TLS, HTTP/2演習
TLS, HTTP/2演習
 
HTTP/2, QUIC入門
HTTP/2, QUIC入門HTTP/2, QUIC入門
HTTP/2, QUIC入門
 
SSL/TLSの基礎と最新動向
SSL/TLSの基礎と最新動向SSL/TLSの基礎と最新動向
SSL/TLSの基礎と最新動向
 
Technical Overview of QUIC
Technical  Overview of QUICTechnical  Overview of QUIC
Technical Overview of QUIC
 
httpbis interim とhttp2.0相互接続試験の話
httpbis interim とhttp2.0相互接続試験の話httpbis interim とhttp2.0相互接続試験の話
httpbis interim とhttp2.0相互接続試験の話
 
そうだったのか! よくわかる process.nextTick() node.jsのイベントループを理解する
そうだったのか! よくわかる process.nextTick() node.jsのイベントループを理解するそうだったのか! よくわかる process.nextTick() node.jsのイベントループを理解する
そうだったのか! よくわかる process.nextTick() node.jsのイベントループを理解する
 

Recently uploaded

論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...Toru Tamaki
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A surveyToru Tamaki
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)Hiroki Ichikura
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNetToru Tamaki
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Yuma Ohgami
 
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案sugiuralab
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdftaisei2219
 

Recently uploaded (8)

論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
 
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
 

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

  • 1. Node.jsで SPDYのベンチマーク 体験サイトを作りました。 SPDY & WS 勉強会(仮) 2013年3月28日 IIJ 大津 繁樹
  • 2. 自己紹介 • 所属:株式会社 インターネットイニシアティブ • アプリケーション開発部 戦略的開発室 • Node.js, HTML5, Kinect, SPDY etc.. • 流行しそうなものを検証・評価してます。 • twitter: @jovi0608 • github: https://github.com/shigeki
  • 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対応に なったので取り止め) • ベンチマークページは単に画像を並べただけ • 画像数は 10~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の処理部分だから同じだろう。
  • 8. SPDYベンチマークのやり方 10~90枚の画 像数を選ぶ 手動の場合は リンクをクリックして3種 類のベンチを進める
  • 11. で、速くなるの? • 試してください。 • 速い場合もあるし、遅い場合もあります。 • 各フェーズの時間のかかり方を見ましょう。 • 手動で1つ・1つテストをすると spdy, spdy/3, spdy/3+push で画像の見え方が違います。 • server push はそれほど効果がないかも…
  • 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