HTTP/2 vs HTTP/3 & QUIC
⏱️ ~3-minute bite · solve the sandbox to master
5-Year-Old Metaphor
— The physical, real-world picture. No jargon.🍽️ HTTP versions are different ways to order food at a restaurant.
The restaurant analogy
HTTP/1.1 — you order one dish, wait for it to arrive, then order the next. You can order from up to 6 waiters simultaneously, but each waiter handles one dish at a time. Slow. Waterfalls visible in DevTools.
HTTP/2— one waiter takes your entire order at once. Dishes arrive as they're ready, out of order. Much faster. But if the kitchen has a fire alarm (TCP packet loss), all dishes pause.
HTTP/3 — each dish has its own dedicated waiter (QUIC stream). If one waiter trips (packet loss), others keep delivering. And if you leave one restaurant and go to another (network switch), your order follows you via your loyalty card (Connection ID).
🐌 HTTP/1.1
- • 6 TCP connections
- • HOL blocking per-connection
- • No compression
- • Optional TLS
🚄 HTTP/2
- • 1 TCP connection
- • Multiplexed streams
- • HPACK compression
- • HTTPS required
⚡ HTTP/3
- • 1 QUIC/UDP conn
- • No HOL blocking
- • QPACK compression
- • TLS 1.3 built-in
Interactive Sandbox
— Move something, see it react instantly.Protocol Pattern
GET /index.html
← 200 OK (index.html) [100ms]
GET /style.css, /script.js, /img1…img4 (6 parallel)
← 200 OK × 6 [200ms each]
GET /font.woff, /icon.svg… (queued, waiting)
Challenge
Step through all 5 patterns to their final step. Understand what HOL blocking means in each protocol.
Why Should I Care?
— The exact interview question + the bug it kills.Interview questions
Q: Why does HTTP/2 still have TCP head-of-line blocking?
HTTP/2 multiplexes streams at the application layer, but all streams share one TCP connection at the transport layer. TCP guarantees ordered, reliable delivery for the entire connection. When a single TCP packet is lost and retransmitted, TCP holds all subsequent data — even data for completely unrelated HTTP/2 streams — until the gap is filled. QUIC solves this by implementing per-stream reliability in user space over UDP, so packet loss on stream A doesn't block stream B.
Q: What is 0-RTT and what are its tradeoffs?
0-RTT (zero round-trip time) resumption lets a QUIC client send HTTP requests in its very first packet to a server it has connected to before. Normal TLS 1.3 takes 1 RTT; TCP+TLS 1.2 took 3 RTT. Tradeoff: replay attacks. A network attacker can replay a 0-RTT request to cause the server to re-execute it (e.g., re-submit a form). Only use 0-RTT for safe/idempotent requests (GET, not POST).
Q: When does HTTP/2 server push help vs hurt?
Push helps when: first visit to a page where the server knows exactly what resources are needed and the client cache is cold. Push hurts when: the client already has the resource cached (server can't see client cache, pushes anyway = wasted bandwidth), or the server over-pushes speculative resources. Chrome removed HTTP/2 Push in v106. Use 103 Early Hints or <link rel=preload> instead.
Practical tip
Open Chrome DevTools → Network tab → right-click column header → enable Protocol. You'll see h2 (HTTP/2) or h3(HTTP/3) for modern CDN assets. Your own origin server may still serve h1.1 if you haven't configured it.
The Deep Dive
— Spec refs, engine internals, the minutiae.HPACK header compression
HTTP/1.1 sends full headers on every request — Cookie, User-Agent, Accept— often 500–2000 bytes per request. HTTP/2 maintains a shared dynamic table between client and server. After the first request, subsequent requests reference table entries by index. The second request to the same origin might have 0 bytes of header overhead.
| 1 | // HTTP/1.1 — headers sent in full every time |
| 2 | GET /api/users HTTP/1.1 |
| 3 | Host: api.example.com |
| 4 | User-Agent: Mozilla/5.0 (Macintosh...) |
| 5 | Accept: application/json |
| 6 | Cookie: session=abc123; preferences=dark |
| 7 | |
| 8 | // HTTP/2 — HPACK: after 1st request, only deltas sent |
| 9 | HEADERS frame: :path = /api/users (all other headers = table references) |
ALPN: protocol negotiation in TLS
Application-Layer Protocol Negotiation (ALPN) is a TLS extension that lets client and server agree on HTTP version during the TLS handshake — no extra round trip. The client offers ["h2", "http/1.1"] in the ClientHello. The server picks its preferred match and responds in the ServerHello. HTTP/3 uses a different mechanism: the Alt-Svc header in an HTTP/2 response advertises QUIC support for the next connection.
Analyzing the waterfall in DevTools
Chrome DevTools Network tab waterfall columns to watch:
| Column | What it means |
|---|---|
| Queueing (gray) | Request waiting to start — connection pool full, lower priority, or disk cache lookup |
| Stalled (gray) | Connected but waiting — e.g. proxy negotiation or insufficient send window |
| TTFB (green) | Time to First Byte — server processing time + network RTT |
| Content Download (blue) | Time to receive the response body |
| Protocol column | h1, h2, h3 — reveals which protocol is actually used |
CDN support for HTTP/3
Cloudflare, Fastly, AWS CloudFront, and Akamai all support HTTP/3 at their edge. Your origin server doesn't need to support QUIC if you're behind a CDN — the CDN terminates the connection and can use HTTP/2 or HTTP/1.1 to your origin. To enable on Cloudflare: Dashboard → Speed → Optimization → HTTP/3 (QUIC) → On.
Interview Questions
— Real questions from real interviews — with answers.HTTP/2 fixes app-level HOL but TCP still blocks all streams on one lost packet; HTTP/3/QUIC fixes both.
HPACK maintains a shared dynamic table so repeated headers (Cookie, User-Agent) compress to near-zero bytes.
0-RTT sends HTTP data in the first packet for known servers, but is vulnerable to replay attacks.
Servers can't see the browser cache, so they push resources the client already has — wasting bandwidth.
QUIC uses a Connection ID (not IP:port), so connections survive network changes like WiFi to cellular.
HTTP/2 when QUIC/UDP is blocked by firewalls or when the network is low-latency and reliable.
Memory Game
— Quick quiz — lock the concept in long-term memory.What does HTTP/2's binary framing layer replace compared to HTTP/1.x?