Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドエンジニアも知っておきたい HTTP/3 で変わること
Search
y_ahiru
November 17, 2023
Programming
16
13k
フロントエンドエンジニアも知っておきたい HTTP/3 で変わること
フロントエンドカンファレンス沖縄 2023 の登壇資料です
y_ahiru
November 17, 2023
Tweet
Share
More Decks by y_ahiru
See All by y_ahiru
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
9
1.6k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
800
ゆるふわCQRS入門
yahiru
2
610
設計におけるソリューションドメイン
yahiru
3
1.6k
PHPで始めるGitHub Actions
yahiru
1
740
5ヶ月でカバレッジを20%から90%にあげた話
yahiru
2
6.7k
入門ミューテーションテスト/ A bigginer's guide to Mutation testing
yahiru
0
1.5k
Eloquentに別れを告げるタイミングについて考えた
yahiru
2
2k
DDDについて勉強したので5分でまとめる
yahiru
0
320
Other Decks in Programming
See All in Programming
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
300
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
170
Google Cloudとo11yで実現するアプリケーション開発者主体のDB改善
nnaka2992
1
160
PromptyによるAI開発入門
ymd65536
1
120
Goで作るChrome Extensions / Fukuoka.go #21
n3xem
0
170
Jakarta EE meets AI
ivargrimstad
0
810
Introduction to C Extensions
sylph01
3
130
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.5k
楽しく向き合う例外対応
okutsu
0
760
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
870
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
340
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
160
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Visualization
eitanlees
146
15k
A better future with KSS
kneath
238
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
GitHub's CSS Performance
jonrohan
1030
460k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Designing for Performance
lara
605
68k
Transcript
フロントエンドエンジニアも知っておきたい HTTP/3 で変わること フロントエンドカンファレンス沖縄 2023
名前: 吉田あひる (@strtyuu) 仕事: バックエンドエンジニア 所属: スターフェスティバル株式会社 自己紹介
HTTP/3
• 2022年6月に RFC 9114 として標準化された HTTP/2 に続くメジャーバー ジョン • TCP
の代わりに QUIC の上で動作する • Q-Success によると 27%のサイトが HTTP/3 を利用している (2023年10 月時点) ◦ https://w3techs.com/technologies/comparison/ce-http3 HTTP/3 とは?
QUIC とは? • 2021年5月に RFC 9000 などで標準化された • トランスポート層のプロトコルで、通信の信頼性や輻輳制御、暗号化など 様々な機能を提供する
• UDP をベースに作られているが、TCPと同じように信頼性がある
HTTP/2 と HTTP/3 の比較 機能 HTTP/2 HTTP/3 HTTP Semantics など
HTTP/2 HTTP/3 多重化 HTTP/2 QUIC 暗号化 TLS QUIC(TLS 1.3) 信頼性/輻輳制御/etc TCP QUIC ポート番号 TCP UDP HTTP/2 の時と比べて、QUICだけで多くの仕事を担当するように
• TCP の Head of Line Blocking の解消 • 接続確立までの時間の短縮
• 優先度制御の改善 (正確には HTTP/3 から独立した機能 • 通信経路が切り替わる時に切断されなくなる • パケットロス時の通信が効率化 • トランスポート層の通信も暗号化されるようになる • 通信の暗号化が必須に • etc HTTP/3 で何が変わるのか?
不安定な通信環境下での 通信速度が改善
HTTP/1.1 Persistent Connection HTTP/1.1 までの時代は、TCP コネ クション上で通信を直列に並べて処 理していた。
HTTP/2 Multiplexing 通信の多重化を行えるようにするこ とで複数の通信をまとめて行うように なり、通信効率を大きく改善
TCP の Head-of-Line-Blocking 問題 1/4 TCP はコネクション内でパケットの順序が割り振られて おり、送信者が送った順番でパケットを 処理する必要がある。
TCP の Head-of-Line-Blocking 問題 2/4 パケットロスなどが発生すると再送されるまでの間 後続のパケットを処理できなくなる
TCP の Head-of-Line-Blocking 問題 3/4 HTTP/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/3 HTTP Semantics など HTTP/2 HTTP/3
多重化 HTTP/2 QUIC 暗号化 TLS QUIC(TLS 1.3) 信頼性/輻輳制御/etc TCP QUIC ポート番号 TCP UDP HTTP/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_tcptlshttp2http3fast ly_1.html ◦
https://tech.loveholidays.com/making-loveholidays-18-faster-with- http-3-1860879528a7 HTTP/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/ 参考資料