http/2 でリバプロするだけでグラフツールを 高速化できた話
TRANSCRIPT
![Page 1: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/1.jpg)
HTTP/2 でリバプロするだけでグラフツールを 高速化できた話
!
!
2015/04/14 @sonots HTTP/2 RFC発行記念パーティ+LT大会
![Page 2: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/2.jpg)
Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved.
2
自己紹介・瀬尾 @sonots ・DeNA, Co., Ltd ・Fluentd コミッタ ・最近、vim-plugin になり ました ・HTTP/2 弱者
https://github.com/mattn/vim-sonots
![Page 3: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/3.jpg)
![Page 4: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/4.jpg)
Yohoushi
• 拙作の便利っぽいグラフツール
![Page 5: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/5.jpg)
h2o
• あの nopan や unco で有名な
• :D 社の kazuho さんが作った
• 高速 HTTP サーバ
• HTTP/2 リバースプロキシとしても利用できる
![Page 6: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/6.jpg)
h2o + Yohoushi
![Page 7: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/7.jpg)
h2o
Yohoushi
Browser
HTTP/2
HTTP/1.1
![Page 8: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/8.jpg)
HTTP/2 の特徴• バイナリでの通信
• リクエストとレスポンスの多重化によるレイテンシの削減
• ヘッダの圧縮によるプロトコルオーバーヘッドの最小化
• リクエスト優先度設定
• サーバープッシュ
![Page 9: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/9.jpg)
HTTP/1.1
• 接続ごとに SYN/ACKの1往復 (keep-alive しない場合) • リソースごとにリクエスト/レスポンスの1往復 • ブラウザは最大で4~6並列
※ ハイパフォーマンスブラウザネットワーキングより
![Page 10: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/10.jpg)
多重化 ~ HTTP/2
• 1つ接続内に複数の仮想チャンネル • 100以上の同時リクエストが可能
※ ハイパフォーマンスブラウザネットワーキングより
![Page 11: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/11.jpg)
サーバサイドで画像生成 している隙に
大量の画像データを 転送しておける可能性
![Page 12: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/12.jpg)
Yohoushi (HTTP/1.1) 単独
Chrome 6並列
![Page 13: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/13.jpg)
h2o on Yohoushi (HTTP/2)
>= 6並列
![Page 14: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/14.jpg)
600グラフ 1回目 2回目 3回目HTTP/1.1
(non keep-alive) 13.67s 14.12s 13.93s
HTTP/2 リバプロ 9.20s 9.46s 9.02s
600グラフ表示比較
1.5倍速!!!Web Worker 数 4
![Page 15: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/15.jpg)
web worker 数を6以上にweb worker 数 4 => 12 1回目 2回目 3回目
HTTP/1.1 (non keep-alive) 13.40s 13.24s 13.32s
HTTP/2 リバプロ 8.58s 8.14s 9.06s
コア数 4 のホスト、コア数あればもっと伸びる可能性大
1.55倍速!!!
![Page 16: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/16.jpg)
varnish 1回目 2回目 3回目HTTP/1.1
(non keep-alive) 9.83s 8.91s 9.05
HTTP/2 リバプロ 6.01s 6.66s 5.90s
おまけ (キャッシュして静的配信)
キャッシュで HTTP/1.1、HTTP/2 共に 1.5倍速 動的配信: HTTP/2 で 4.6 sec 高速 静的配信: HTTP/2 で 3.3 sec 高速
VIRNISH_MIN_THREADS=500
![Page 17: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/17.jpg)
HTTP/1.1 HTTP/2
latency が入る回数が少ない
理屈
サーバ処理
サーバ処理
サーバ処理
サーバが遊んでる時間がなくなる
リクエスト
レスポンス
ネットワーク
ネットワーク
ネットワーク
![Page 18: HTTP/2 でリバプロするだけでグラフツールを 高速化できた話](https://reader033.vdocuments.mx/reader033/viewer/2022042607/55a894aa1a28ab17608b48a9/html5/thumbnails/18.jpg)
HTTP/2 でリバプロ!
• リクエストとレスポンスの多重化によるレイテンシの削減
• 社内ネットワーク (低レイテンシ)でも
• 1.5倍速!!!(当社比)
• Web Worker 数を6以上に増やして
• 1.55倍速!!!(当社比) コア数あればもっと速度出る可能性大