HTTP Versions: Evolution of the Web

[!TIP] Interview Tip: If asked “How to optimize a mobile app?”, mention HTTP/3. Its “Connection Migration” feature makes it perfect for users moving between WiFi and 4G.

1. HTTP/1.1: The Standard (1997-2015)

The workhorse of the web.

  • Keep-Alive: Reuses the TCP connection.
  • Text Based: Headers are ASCII (User-Agent: Chrome).
  • The Flaw: Head-of-Line (HOL) Blocking.
    • It’s like a grocery store with one lane.
    • If the customer in front buys 100 items (Large Image), you (Small CSS) wait.
    • (Note: Optimizing headers here is key for CDN performance).
    • Hack: Browsers open 6 parallel TCP connections to the same server to overcome this limit.

2. HTTP/2: The Multiplexer (2015)

Google’s SPDY project became HTTP/2. It solved the “Application Layer HOL Blocking” by moving away from text-based requests.

A. Binary Framing Layer

Unlike HTTP/1.1 which sends ASCII text (GET /index.html HTTP/1.1), HTTP/2 breaks communication into tiny Binary Frames.

Interactive Frame Explorer

Hover over the fields to understand the 9-byte Header.

Length
24 bits
Type
8 bits
Flags
8 bits
Stream ID
31 bits
Payload
Variable
Hover over a field to see details.

B. Multiplexing: The “Magic Conveyor Belt”

  • It splits data into frames.
  • It interleaves Frame 1 of Image, Frame 1 of CSS, Frame 2 of Image… on a single TCP connection.
  • No more Application-Layer HOL Blocking.

C. HPACK: Header Compression

HTTP headers are redundant. Every request sends User-Agent, Cookie, Accept-Encoding. HPACK uses two tables:

  1. Static Table: Pre-defined list of 61 common headers (e.g., :method: GET, :status: 200).
  2. Dynamic Table: Remembers headers specific to this connection. If you send a 1KB cookie once, HPACK assigns it an ID. Next time, you only send the ID.

Interactive Demo: HPACK Savings

Send multiple requests and watch the Dynamic Table learn.

Client Requests
Ready...
Dynamic Table (Server Memory)
Index Header
Total Saved: 0 bytes

[!WARNING] Server Push: HTTP/2 introduced “Server Push” (Server sends CSS before you ask). It failed in practice because Servers didn’t know if the Browser already had the file in Cache. Chrome removed support for it in 2020.

Waterfall (H1) vs Multiplexing (H2)

HTTP/1.1 (Wait for it...)
HTTP/2 (Frames everywhere!)

D. System Walkthrough: An HTTP/2 Frame Stream

How does the server send style.css and script.js at the same time on one connection? It slices them into frames and interleaves them.

The Stream:

  1. Frame 1 (Stream 5): HEADERS (Status: 200, Content-Type: text/css)
  2. Frame 2 (Stream 7): HEADERS (Status: 200, Content-Type: application/javascript)
  3. Frame 3 (Stream 5): DATA (“body { color: red…”).
  4. Frame 4 (Stream 7): DATA (“console.log(‘Hello’…”).
  5. Frame 5 (Stream 5): DATA (“… }”) + END_STREAM.

The browser reassembles Stream 5 into style.css and Stream 7 into script.js.

E. The Handshake Upgrade: ALPN

How does the Client know if the Server supports HTTP/2? It happens during the TLS Handshake via ALPN (Application-Layer Protocol Negotiation).

  1. Client Hello: “I support TLS 1.3. I can speak h2 (HTTP/2) or http/1.1.”
  2. Server Hello: “Let’s use h2.”

3. HTTP/3: The Rebel (2020+)

HTTP/3 dumps TCP entirely and builds on UDP. It implements its own reliability layer called QUIC.

Why UDP?

TCP is implemented in the OS Kernel. Updating it takes years (waiting for OS updates like Windows/Linux). QUIC lives in “User Space” (the App/Browser), so it updates instantly.

Feature A: True Parallelism (No HOL Blocking)

In QUIC, streams are independent. If Stream A loses a packet, Stream B keeps going. This is critical for Real-Time Gaming where latency is king.

Feature B: Connection Migration (The Killer Feature)

  • Scenario: You are on WiFi downloading a file. You walk out the door and switch to 4G.
  • TCP: Your IP Address changes. The socket is defined by (SrcIP, SrcPort, DstIP, DstPort). The tuple breaks. Connection Dead. Re-handshake.
  • QUIC: Uses a Connection ID (CID) (e.g., UUID a1b2c3d4). Even if your IP changes, the Server sees the same CID and accepts the packet. The download continues seamlessly.

Feature C: QPACK (The Out-of-Order Hero)

Remember HPACK? It relies on strict ordering. If Packet 1 (adding a header) is lost, Packet 2 cannot be decoded. In TCP, this is fine because TCP waits. In UDP, Packet 2 arrives before Packet 1 is retransmitted.

  • The Solution: QPACK. It uses a separate “Control Stream” to synchronize the header table.
  • If a packet arrives and it needs a header from the dynamic table that hasn’t arrived yet, QPACK only blocks that specific stream, not the whole connection.

4. Interactive Demo: Connection Migration (The “Parking Lot”)

Experience Connection Migration. You are downloading a large file.

  1. Click “Start Download” (on WiFi).
  2. Mid-download, click “Switch Network” (to 4G).
  3. Watch TCP fail and restart. Watch QUIC keep going.
HTTP/2 (TCP)
Network: WiFi
Waiting...
HTTP/3 (QUIC)
Network: WiFi
Waiting...
CID: a1b2...

5. Comparison Summary

Feature HTTP/1.1 HTTP/2 HTTP/3
Transport TCP (Cleartext) TCP (Encrypted) UDP (QUIC, Encrypted)
Parallelism 6 Connections 1 Connection (Multiplexed) 1 Connection (Independent Streams)
Headers Text (Bloated) HPACK (Compressed) QPACK (Compressed)
HOL Blocking App Layer Blocking TCP Layer Blocking None
Network Switch Connection Reset Connection Reset Seamless Migration