Can you walk through DNS resolution, TCP, and TLS in the HTTP request lifecycle?

Browser request flow: DNS lookup (recursive resolver → root → TLD → authoritative) → TCP handshake (3-way SYN/SYN-ACK/ACK) → TLS handshake (ClientHello/ServerHello/cert/key exchange) → HTTP request → response. HTTP/2 and HTTP/3 (QUIC) collapse some of this. Front-end implications: preconnect/dns-prefetch, HTTP/2 multiplexing, certificate reuse, edge POPs.

5 min read·~8 min to think through

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

URL parsed — protocol, host, path, query.
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).
TCP handshake — 3-way: client SYN → server SYN-ACK → client ACK. 1 RTT before you can send data.
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).
HTTP request sent (method, headers, body).
Server processes (DB, app, etc.).
HTTP response (status, headers, body, possibly streamed).
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:

Hint	What it does
`<link rel="dns-prefetch" href="//api.example.com">`	Resolve DNS now.
`<link rel="preconnect" href="https://api.example.com">`	DNS + TCP + TLS now (saves up to ~200ms).
`<link rel="preload" as="..." href="...">`	Fetch the resource at high priority.
`<link rel="prefetch" href="...">`	Idle-priority fetch for next nav.

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."

Follow-up questions

•Why is HTTP/3 better than HTTP/2 on mobile?
•When would dns-prefetch be enough vs preconnect?
•What's SNI and why does it matter?

Common mistakes

•Preconnecting to dozens of origins.
•Splitting assets across many subdomains in an HTTP/2 world (was sharding helpful in HTTP/1.1, now harmful).
•Ignoring TLS resumption.

Performance considerations

•Cold connection RTT cost is the biggest perf lever for first-byte latency. Edge POPs + HTTP/3 + preconnect cut hundreds of ms. Reuse connections; minimize origins.

Edge cases

•0-RTT TLS — replay attack class.
•Captive portals breaking HTTPS to the CDN.
•CORS preflight adds an extra OPTIONS round-trip before the real request.

Real-world examples

•Cloudflare, Fastly, Akamai — edge TLS termination; Chromium's preconnect heuristics; CDN docs on HTTP/3.

Senior engineer discussion

Seniors talk about the round-trip budget on cold loads, when to consolidate origins, the practical wins of HTTP/3 on mobile, and how CORS preflights interact with the handshake stack.