FSD Frontend System Design

Part I — The Pipes · Lesson 1.4

Communication Protocols

In one lineHTTP/1.1 queues, HTTP/2 multiplexes over one TCP stream, HTTP/3 removes TCP's shared queue entirely.

Where you've seen itAn Amazon product page pulling 90 assets — six parallel connections on HTTP/1.1, one on HTTP/2.

  • Time15 min
  • DiagramHead-of-line blocking, three versions side by side
  • Chapter1 · Networking

Diagram

diagram
HTTP/1.1 — one request at a time per connection (6 connections max)

  conn 1  [ a.js ][ d.png ][ g.css ]
  conn 2  [ b.js ][ e.png ]
  conn 3  [ c.css ][ f.png ]
          └── each file waits for the one before it on its connection


HTTP/2 — one connection, interleaved frames

  conn 1  [a][b][c][a][d][b][e][a][c] ...
          └── all streams share one pipe, no per-file queue
          ✗ but one lost TCP packet stalls EVERY stream (TCP head-of-line)


HTTP/3 (QUIC over UDP) — independent streams

  conn 1  stream a  [■■■■✗■■]   ← packet lost, only 'a' waits
          stream b  [■■■■■■■]   ← keeps flowing
          stream c  [■■■■■■■]
diagram
TRANSPORT LAYER

  ┌─────────────────────┬─────────────────────┐
  │        TCP          │        UDP          │
  ├─────────────────────┼─────────────────────┤
  │ ordered, reliable   │ unordered, lossy    │
  │ handshake required  │ fire and forget     │
  │ retransmits         │ no retransmit       │
  │ HTTP/1.1, HTTP/2    │ QUIC → HTTP/3, WebRTC│
  └─────────────────────┴─────────────────────┘

How it works

  1. HTTP/1.1 — one in-flight request per connection; browsers open ~6 per origin and queue the rest. This is why we used to sprite images and concat bundles.
  2. HTTP/2 — binary framing multiplexes many streams over one connection, plus header compression and server push (now largely deprecated).
  3. TCP head-of-line blocking — HTTP/2 fixes the application queue but not the transport one; a single dropped packet stalls every stream.
  4. HTTP/3 / QUIC — runs on UDP with per-stream ordering, so loss is isolated. Connection setup collapses to 0–1 RTT.

Trade-offs

VersionUse whenWatch out for
HTTP/1.1Legacy infra onlyConcat/sprite hacks still needed
HTTP/2Default today; many small filesLossy networks stall all streams
HTTP/3Mobile, high-loss, global usersSome corporate proxies block UDP

Anti-pattern: bundling everything into one giant file on HTTP/2 — it destroys caching granularity for a problem the protocol already solved.

Interview angle

"You migrated to HTTP/2 and nothing got faster. Why?"

  • Check the bundling strategy: 1.1-era concatenation cancels multiplexing's benefit.
  • Check the network: on lossy mobile links, TCP head-of-line blocking eats the gain.
  • Check the origin: if TTFB is server-bound, the protocol was never the bottleneck.

Recap

  • 1.1 queues per connection, 2 multiplexes per connection, 3 multiplexes per stream.
  • Head-of-line blocking moves down the stack with each version, then disappears.
  • Your bundling strategy must match your protocol version.