フロントエンドカンファレンス沖縄 2023 の登壇資料です
フロントエンドエンジニアも知っておきたいHTTP/3 で変わることフロントエンドカンファレンス沖縄2023
View Slide
名前: 吉田あひる (@strtyuu)仕事: バックエンドエンジニア所属: スターフェスティバル株式会社自己紹介
HTTP/3
● 2022年6月に RFC 9114 として標準化された HTTP/2 に続くメジャーバージョン● TCP の代わりに QUIC の上で動作する● Q-Success によると 27%のサイトが HTTP/3 を利用している (2023年10月時点)○ https://w3techs.com/technologies/comparison/ce-http3HTTP/3 とは?
QUIC とは?● 2021年5月に RFC 9000 などで標準化された● トランスポート層のプロトコルで、通信の信頼性や輻輳制御、暗号化など様々な機能を提供する● UDP をベースに作られているが、TCPと同じように信頼性がある
HTTP/2 と HTTP/3 の比較機能 HTTP/2 HTTP/3HTTP Semantics など HTTP/2 HTTP/3多重化 HTTP/2 QUIC暗号化 TLS QUIC(TLS 1.3)信頼性/輻輳制御/etc TCP QUICポート番号 TCP UDPHTTP/2 の時と比べて、QUICだけで多くの仕事を担当するように
● TCP の Head of Line Blocking の解消● 接続確立までの時間の短縮● 優先度制御の改善 (正確には HTTP/3 から独立した機能● 通信経路が切り替わる時に切断されなくなる● パケットロス時の通信が効率化● トランスポート層の通信も暗号化されるようになる● 通信の暗号化が必須に● etcHTTP/3 で何が変わるのか?
不安定な通信環境下での通信速度が改善
HTTP/1.1Persistent ConnectionHTTP/1.1 までの時代は、TCP コネクション上で通信を直列に並べて処理していた。
HTTP/2Multiplexing通信の多重化を行えるようにすることで複数の通信をまとめて行うようになり、通信効率を大きく改善
TCP の Head-of-Line-Blocking 問題 1/4TCP はコネクション内でパケットの順序が割り振られて おり、送信者が送った順番でパケットを処理する必要がある。
TCP の Head-of-Line-Blocking 問題 2/4パケットロスなどが発生すると再送されるまでの間 後続のパケットを処理できなくなる
TCP の Head-of-Line-Blocking 問題 3/4HTTP/2 では 複数の通信のパケットがごちゃまぜに並んでいるため同じコネクションを使っている通信全てで順序を共有している状態 になる
TCP の Head-of-Line-Blocking 問題 4/4パケットロスが発生すると 、再送されるまでのあいだ同じコネクションを使っている 他の通信のパケットも待ちの状態 になる。
● 不安定な通信環境だと通信速度に悪影響がある○ レンダリングブロックの時間の増加など● パケットロスが多い場合、複数のコネクションを使う HTTP/1.x の方がパフォーマンスが高い場合もTCP の Head-of-Line-Blocking の何が問題なのか?
QUIC による Head-of-Line-Blocking 問題の解消QUIC ではストリーム(通信)単位で順序の保証をしているため、パケットロスが発生しても他のストリームに影響が出なくなる
HTTP/3 がストリーム単位で信頼性を担保できる理由機能 HTTP/2 HTTP/3HTTP Semantics など HTTP/2 HTTP/3多重化 HTTP/2 QUIC暗号化 TLS QUIC(TLS 1.3)信頼性/輻輳制御/etc TCP QUICポート番号 TCP UDPHTTP/2 と違い、HTTP/3 はストリームの管理と信頼性の担保を QUIC がまとめて担当しているため、ストリーム単位の信頼性の担保が可能になっている
● 不安定な通信環境の通信速度が改善○ 通信面のアクセシビリティが向上すると言えそう○ 海外との通信や通信環境の悪い国へサービス提供するときとかにメリットが大きそうHTTP/3 でどう変わるのか?
コネクション確立までの時間の短縮
これまで(TCP + TLS)のコネクション確立TCP と TLS それぞれでハンドシェイクが必要な状態
HTTP/3 (QUIC) のコネクション確立TLS が QUIC に内包されているため、コネクション確立と暗号化のためのやりとりが同時に行える ように
● TTFB(Time To First Byte) が2~3割ほど改善する○ https://www.publickey1.jp/blog/21/http3web_tcptlshttp2http3fastly_1.html○ https://tech.loveholidays.com/making-loveholidays-18-faster-with-http-3-1860879528a7HTTP/3 でどう変わるのか?
HTTP/3 以外の改善
● サーバーがHTMLを生成している間に preload してほしいリソース情報だけ先にレスポンスを返してしまおうというやつ○ HTML のレスポンスよりも前にリソースの取得を始めることが可能に● RFC 8297 にて提案中で Experimental のステータス○ なので、ブラウザの対応状況はまだ中途半端○ Cloudflare など既に対応している CDN もある● レンダリングブロックの大幅な削減が期待できる103 Early Hints
● レンダリングに影響のないリソースを後回しにして、必要なやつを優先してダウンロードするための仕組み● 2022年6月にRFC 9218 にて標準化○ 元々は HTTP/3 の仕様として議論されていたが、途中で独立し HTTP/2 に対しても使用可能に● HTTP/2 の複雑すぎた優先度制御の代わりとなる○ 8段階の優先順位とincrementalフラグがあるだけの単純な仕様● HTML の Attribute などを考慮しつつブラウザが勝手に順位づけしてくれる模様○ 非アクティブになったタブのリソースは優先度下げるとかもやってくれる● レンダリングブロックの大幅な削減が期待できる優先度制御 - Extensible Prioritization Scheme for HTTP
まとめ
● HTTP/3 は TCP の代わりに QUIC を採用したことで様々な問題が解決された○ 不安定な通信環境下の速度が改善○ コネクション確立までの時間が短縮しTTFBが改善する○ Wi-Fi回線からモバイル回線に切り替わるときなどに通信が継続できるように● より通信速度を速く!というよりは通信環境が悪い人たちの体験向上という側面が大きそう● HTTP/3 から独立した仕様も同時に色々と標準化された● 他にも色々と改善されているので、興味のある人は調べてみてくださいまとめ
● https://ja.wikipedia.org/wiki/HTTP/3● https://ja.wikipedia.org/wiki/QUIC● https://togetter.com/li/1723153● https://www.publickey1.jp/blog/21/http3web_tcptlshttp2http3fastly.html● https://vimeo.com/485450984● https://gihyo.jp/list/group/HTTP-3%E5%85%A5%E9%96%80#rt:/admin/serial/01/http3/0002● http://blog.kazuhooku.com/2019/07/http-ietf-105.html● https://asnokaze.hatenablog.com/entry/2019/09/16/021413● https://asnokaze.hatenablog.com/entry/2019/11/07/020354● https://calendar.perfplanet.com/2022/http-3-prioritization-demystified/● http://blog.kazuhooku.com/2018/04/http2.html● https://http3-explained.haxx.se/ja● https://http2-explained.haxx.se/ja● https://rebuild.fm/154/● https://developer.mozilla.org/ja/docs/Web/HTTP/Connection_management_in_HTTP_1.x● https://eng-blog.iij.ad.jp/archives/tag/about-quic● https://tech.loveholidays.com/making-loveholidays-18-faster-with-http-3-1860879528a7参考資料
● https://developer.mozilla.org/ja/docs/Web/HTTP/Status/103● https://www.youtube.com/watch?v=_hfG0HCufbs● https://web.dev/articles/fetch-priority?hl=ja● https://blog.cloudflare.com/better-http-3-prioritization-for-a-faster-web/● https://blog.cloudflare.com/early-hints/● https://www.cloudflare.com/ja-jp/learning/ssl/what-happens-in-a-tls-handshake/参考資料