Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to HTTP2入門
Similar to HTTP2入門 (20)
More from Sota Sugiura
Recently uploaded
Recently uploaded (8)
HTTP2入門
- 2. アジェンダ • HTTPのおさらい • About HTTP/2 - フレーム通信 - バイナリ - 通信の多重化 - サーバプッシュ • HTTP/2で変えるべきこと • 参考資料
- 3. HTTPのおさらい
- 5. HTTPはWebのための技術 • HTTPはWeb上で 文書 をやり取りするために生まれた • 文書 とは主にHTMLのこと • HTMLとHTTPは兄弟 • この当時の 文書 にWebアプリケーションは含まれない
- 6. Webを支えるHTTP • Webのトラフィックはほぼ全てHTTP通信 - ブラウザからサイトにアクセス - APIを叩いてデータを取得(JSON, XML, SOAP) - 掲示板にコメントを投稿
- 7. HTTP on TCP/IP • HTTPはTCP/IPの上に成り立つプロトコル • サーバとクライアントが会話するための取り決め • 通信相手の特定はIP、データ配達はTCPの役割 - HTTPは相手がどこにいる誰かを意識しない
- 8. HTTPの実態はテキストデータ GET /top/login HTTP/1.1 User-Agent: Telnet [ja] Host: sota1235.com name=sota&hobby=aiko HTTP/1.1 200 OK Date: Tue, 10 Jul 2015 06:50:15 GMT Content-Length: 362 Content-Type: text:html <html> ……… HTTPリクエスト HTTPレスポンス
- 9. HTTP is Simple • HTTPはプロトコル • プロトコルとはメッセージのルール • ルールに従うパーサーを書けばHTTPサーバ/クライアントの出来上がり - 自前で実装したりすると勉強になります • クライアントは リクエスト を送る • サーバは レスポンス を返す
- 10. HTTP is Stateless • HTTPはステートレスなプロトコル • クライアント、サーバは通信内容を覚えない • 覚えさせたきゃ 🍪を使おう
- 12. About HTTP/2
- 13. HTTP/1.xから変わらないこと • HTTP on TCP/IP • 通信はクライアントのリクエストから始まる
- 14. HTTP/2で変わること • 通信単位がHTTPメッセージからフレームに • メッセージをバイナリに圧縮可能 • 一部でステートフルな通信を行う • 多重通信が可能に
- 15. About HTTP/2 • フレーム通信 • 通信の多重化 • バイナリメッセージ • サーバプッシュ • 優先度制御
- 16. About HTTP/2 • フレーム通信 • 通信の多重化 • バイナリメッセージ • サーバプッシュ • 優先度制御
- 17. フレーム通信① • HTTP/2での通信単位はフレーム • 何種類かのフレームとやり取りして通信を行う • フレームにはストリームIDが割り当てられる
- 18. フレーム通信② • HEADERフレーム - HTTP/1.xのヘッダー部分 • DATAフレーム - HTTP/1.xのボディ部分 • PRIORITYフレーム - 優先度制御を行う • PUSH_PROMISEフレーム - サーバプッシュ制御 • RST_STREAMフレーム - ストリーム通信の終了を知らせる
- 19. 例：HEADERフレーム フレーム通信③ :method = GET :scheme = https :path = /resource host = example.org accept = image/jpg
- 20. About HTTP/2 • フレーム通信 • 通信の多重化 • バイナリメッセージ • サーバプッシュ • 優先度制御
- 21. 通信の多重化 • HTTP/1.xでの通信は1リクエストに1レスポンス • レスポンスが返るまで次のリクエストは飛ばせない • 1つのTCP通信に1つのHTTP通信 • 多くのブラウザは6つのTCP通信を並列することで 擬似的にHTTP通信を多重化している
- 24. HTTP/1.xの多重化
- 26. HTTP/1.xの多重化 • HTTP/1.xに並列通信の仕組みはない - 厳密にはあるが存在が空気 • 6本のTCP通信を並列することで擬似的に並列通信 している • どうあがいても1RTT = 6リクエスト/レスポンス
- 27. それ、並列化しようぜ！
- 29. HTTP/2の場合 • レスポンスを任意のタイミングで返すことができる - これにより細やかな順序制御が可能に！ • クライアントはレスポンスを待たずにフレームを送 信できる • どれがどれに対応するかはストリームIDで確認
- 31. About HTTP/2 • フレーム通信 • 通信の多重化 • バイナリメッセージ • サーバプッシュ • 優先度制御
- 33. バイナリの恩恵 • 実装による解釈の差が出にくい - HTTP/1.xでは実装によってメッセージの解釈に差が出ていた - そこから脆弱性が発生することもしばしば - 有名どころだとBREACH攻撃とか - 参考：めんどうくさいWebセキュリティ • 通信量が減る - HTTP/1.xではgzip圧縮がデファクト
- 36. HTTP/1.xの無駄 /a.pngを取得 GET /a.png HTTP/1.1 Accept: image/gif, image/jpeg, */* Accept-Language: ja Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (Compatible; MSIE 6.0; Windows NT 5.1;) Host: www.xxx.zzz Connection: Keep-Alive
- 37. HTTP/1.xの無駄 /b.pngを取得 GET /b.png HTTP/1.1 Accept: image/gif, image/jpeg, */* Accept-Language: ja Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (Compatible; MSIE 6.0; Windows NT 5.1;) Host: www.xxx.zzz Connection: Keep-Alive
- 38. HTTP/1.xの無駄 /c.pngを取得 GET /c.png HTTP/1.1 Accept: image/gif, image/jpeg, */* Accept-Language: ja Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (Compatible; MSIE 6.0; Windows NT 5.1;) Host: www.xxx.zzz Connection: Keep-Alive
- 39. HTTP/1.xの無駄 /c.pngを取得 GET /c.png HTTP/1.1 Accept: image/gif, image/jpeg, */* Accept-Language: ja Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (Compatible; MSIE 6.0; Windows NT 5.1;) Host: www.xxx.zzz Connection: Keep-Alive
- 40. HTTP/1.xにおけるオーバーヘッド • 同じヘッダーを通信の回数だけやりとりする • 前回と差異のある情報は少ないことが多い • 『このヘッダーはさっきと同じだよ！』と知らせる ことができれば無駄が減るはず…
- 41. バイナリメッセージ on HTTP/2 • HTTP/2では通信をバイナリで行うことが可能 • 使用頻度の高いヘッダーフィールドはあらかじめ番 号が定義されている - 例： :method GET => 2 • 一度送信したものもその場で動的に番号を割り当て、 定義する
- 42. / にアクセス HTTP/2の場合 :method = GET :scheme = https :path = / host = example.org accept = image/jpg 02 07 04 38 example.org 19 image/jpg
- 43. /a.png にアクセス HTTP/2の場合 :method = GET :scheme = https :path = /a.png host = example.org accept = image/jpg 02 07 04 a.png 62 63
- 44. 通信量減った＼(^o^)／ • これにより最大5%まで圧縮が可能になった • HTTP/2通信開始時に送るSETTINGフレームで記憶する ヘッダーの数を指定できる - 一部ステートフル • 圧縮にはハフマンコーディングという技術が使われている - [検索] [ HPACK ]
- 45. About HTTP/2 • フレーム通信 • 通信の多重化 • バイナリメッセージ • サーバプッシュ • 優先度制御
- 51. About HTTP/2 • フレーム通信 • 通信の多重化 • バイナリメッセージ • サーバプッシュ • 優先度制御
- 53. 優先度制御 • HTTP/2対応サーバはクライアントが指定した優先 度に従ってレスポンスを返す • これにより描画に必要なCSSファイルを優先して取 得等の処理が可能になった • 優先度の指定の仕方はクライアントにより異なる
- 54. 優先度制御 • 優先度制御の指定方法は主に以下の2つ - リソース同士が依存した木構造 - 数字による重み付け • 現状、有効な優先度制御を行うブラウザはFireFox のみ
- 55. HTTP/2で変えるべきこと
- 56. HTTP/1.xは古い • HTTP/1.xは激しく変わるこの時代に対してとても古い 技術 - 策定されたのはなんと18年前 • 増えるリソース量、求められるレスポンスの速さを実現 するにはHTTP/1.xの技術だけでは限界があった
- 57. Hack HTTP/1.x • 限界突破するために実に様々なHACKが行われてきた - asset pipelines - Domain Sharding - CSS Sprite • これらはHTTP/2の登場によりオワコンになります (^q^)
- 58. asset pipelines/CSS Sprite • 多重通信＆優先度制御が可能になったので引退 • 理由 - 不要なデータがくっついている - ファイルの一部を変更すると全て再転送しなくてはいけない
- 59. Domain Sharding • ブラウザでは1ドメインにつき6本のTCP通信を張る • リソースを違うドメインでばらけさせることで6本の壁 を越える技術
- 60. Domain Sharding • HTTP/2はTCPをまたぐことができない • ドメインがバラけると優先度制御や多重通信の恩恵を受 けられない - 結果、遅くなる • CDNサーバを利用する場合、CDN経由でアプリケー ションにアクセスできるようにしましょう
- 61. 参考資料
- 62. 参考資料 • HTTP/2時代のウェブサイト設計 https://www.slideshare.net/kazuho/http2-51888328 • HTTP/2 Draft 16 日本語訳 http://blog.summerwind.jp/archives/2548
- 63. あわせて知りたい • SPDY • QUIC • HTTP/1.x • h2o