Every request from a browser walks a known path. Knowing the stages tells you which <link rel> hints help, what an edge POP buys you, and why HTTP/2 was a step change.

Stages of a fresh request

1. URL parsed — protocol, host, path, query.
2. DNS resolution — browser asks the OS, OS asks the recursive resolver (ISP / 1.1.1.1 / 8.8.8.8). Resolver walks the hierarchy if not cached: root → TLD (.com) → authoritative nameserver. Returns an IP. Cached at multiple layers (browser, OS, resolver, TTL-bound).
3. TCP handshake — 3-way: client SYN → server SYN-ACK → client ACK. 1 RTT before you can send data.
4. TLS handshake (https) — ClientHello (cipher suites, SNI) → ServerHello + cert + key exchange → Finished. TLS 1.2: 2 RTTs. TLS 1.3: 1 RTT (0-RTT with session resumption).
5. HTTP request sent (method, headers, body).
6. Server processes (DB, app, etc.).
7. HTTP response (status, headers, body, possibly streamed).
8. Browser parses / renders (HTML → tokenize → DOM, CSS → CSSOM, JS executes, layout, paint).

Total cost example

For a cold request to a US East server from Europe:

• DNS: 50–100ms (cold; near-zero cached).
• TCP: 1 RTT ≈ 80ms.
• TLS 1.3: 1 RTT ≈ 80ms.
• Request + first byte: 1 RTT ≈ 80ms.
• ~300ms before any bytes paint.

That's why edge POPs matter — Cloudflare or Fastly terminate TLS within ~20ms of the user, cutting hundreds of ms off the handshake stack.

HTTP/2 — multiplexing

Old HTTP/1.1: one request per TCP connection (or 6 parallel). Head-of-line blocking. HTTP/2 multiplexes many streams over one TCP connection, with header compression (HPACK). One TCP+TLS handshake amortized across many resources.

HTTP/3 — QUIC

Built on UDP. Combines transport + TLS into a single 1-RTT handshake (0-RTT on resumption). Eliminates TCP head-of-line blocking — each stream is independent. Better on lossy mobile networks.

Resource hints

The browser exposes hooks for front-end devs:

Preconnect to the 3–5 domains a page hits early (CDN, fonts, API). More than that and you flood the connection pool.

Front-end implications

• Consolidate origins where possible — every new origin pays a fresh handshake stack.
• Use HTTP/2 / HTTP/3 (your CDN does this for you).
• Set sensible cache headers; subsequent loads skip most of this.
• Self-host fonts or use preconnect for font CDNs.
• Use <link rel="preconnect"> only for origins you'll definitely hit.

Interview framing

"DNS, TCP, TLS, HTTP — four sequential round-trip costs on a cold connection, easily 200–400ms before the first byte. HTTP/2 multiplexes streams over one TCP+TLS connection, saving repeat handshakes. HTTP/3 (QUIC) collapses transport + TLS into one handshake and removes head-of-line blocking. Front-end levers: preconnect for origins you'll hit early, dns-prefetch for ones you might, and minimize origin count to reuse the connection pool. Edge POPs slash the per-RTT cost by terminating TLS near the user."