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
1
990
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
10
2.4k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
1k
ゆるふわCQRS入門
yahiru
2
690
設計におけるソリューションドメイン
yahiru
3
1.7k
PHPで始めるGitHub Actions
yahiru
1
790
5ヶ月でカバレッジを20%から90%にあげた話
yahiru
2
6.8k
入門ミューテーションテスト/ A bigginer's guide to Mutation testing
yahiru
0
1.5k
Eloquentに別れを告げるタイミングについて考えた
yahiru
2
2k
Other Decks in Programming
See All in Programming
RDoc meets YARD
okuramasafumi
4
170
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
🔨 小さなビルドシステムを作る
momeemt
4
680
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
220
AIでLINEスタンプを作ってみた
eycjur
1
230
概念モデル→論理モデルで気をつけていること
sunnyone
1
130
Design Foundational Data Engineering Observability
sucitw
3
200
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
520
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
Namespace and Its Future
tagomoris
6
700
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Building Applications with DynamoDB
mza
96
6.6k
Bash Introduction
62gerente
615
210k
Unsuck your backbone
ammeep
671
58k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Docker and Python
trallard
45
3.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Designing Experiences People Love
moore
142
24k
Documentation Writing (for coders)
carmenintech
74
5k
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/ 参考資料