caduh

What Happens When You Type a URL in a Browser — the tiny explainer

3 min read

A concise, modern walkthrough of the path from address bar to pixels: DNS lookup, HTTP/3 & TLS 1.3 handshakes, CDNs & caching, request/response, and the rendering pipeline.

TL;DR

  • The browser turns a URL into an origin → finds its IP via DNS (often through a CDN).
  • It negotiates HTTP/3 (QUIC) if possible (or falls back to HTTP/2/1.1 over TLS).
  • Sends an HTTP request; caches, service workers, and CDNs may satisfy it before it hits your origin.
  • Receives a response and kicks off parsing, layout, paint, and compositing—plus more fetches for CSS/JS/images.
  • Performance hinges on caching, connection reuse, compression, and render‑blocking resources.

0) Address bar → URL → origin

  • User types https://www.example.com/page?x=1#hash.
  • Browser derives the origin: https + www.example.com + :443.
  • Checks HSTS preload/cache (if present) to force HTTPS.
  • Consults service worker for this scope; if it handles the request, it may short‑circuit the network.

1) DNS (who is example.com?)

  • Browser/OS asks the recursive resolver (e.g., 1.1.1.1/8.8.8.8).
  • Resolver follows the chain: root → TLD → authoritative nameservers.
  • CDNs often return anycast IPs near the user and may use EDNS Client Subnet hints to localize answers.
  • Result: IP (A/AAAA), plus TTL that drives caching.

Already cached answers (browser/OS/ISP) skip the network.

2) Connect & negotiate protocol

Prefer HTTP/3

  • Try QUIC (UDP) to port 443. If the server advertises H3, the browser uses it; otherwise it falls back.

Or fall back to HTTP/2/1.1 over TCP

  • Establish TCP (3‑way handshake).
  • Start TLS 1.3 handshake with SNI (indicates hostname) and ALPN (negotiates h2 or http/1.1).
  • Validate the server certificate chain; check validity/hostname/issuer.
  • With TLS 1.3, fewer round trips; 0‑RTT may replay safe requests (careful with side effects).

QUIC bundles transport + crypto and supports connection migration (e.g., Wi‑Fi → LTE) with lower latency.

3) Request path (who can answer first?)

  1. Browser cache (if Cache-Control/ETag allows).
  2. Service worker (custom offline/edge logic).
  3. CDN/Reverse proxy cache (if key rules match).
  4. Origin server (app/load balancer).

4) The HTTP request

  • Sends method + path + headers (e.g., GET /page).
  • Includes cookies (if same‑site rules allow), client hints, and conditional headers (If-None-Match, If-Modified-Since).
  • Server responds with 200 OK or 304 Not Modified, plus body and caching/security headers.

Peek at headers (examples)

# Show response headers
curl -I https://www.example.com/

# Follow redirects and show timing
curl -L -w "time_connect:%{time_connect} tls:%{time_appconnect} starttransfer:%{time_starttransfer}
" -o /dev/null https://www.example.com/

5) Rendering pipeline (HTML → pixels)

  1. HTML parse → DOM.
  2. CSS fetch & parse → CSSOM (CSS is render‑blocking until it arrives).
  3. JS download/execute (can block; use defer/async appropriately).
  4. Render tree = DOM + CSSOM.
  5. Layout (calculate sizes/positions).
  6. Paint (draw) → Composite (GPU layers).

Critical path tips

  • Inline tiny critical CSS; load the rest later.
  • Use defer for module scripts; keep main‑thread work small.
  • Preload fonts (<link rel="preload" as="font" crossorigin>).

6) Subsequent fetches & connection reuse

  • HTML references more resources → parallel requests over the same connection (H2 multiplexing / H3 streams).
  • HTTP/2: avoids head‑of‑line at the HTTP layer (but still TCP HOL).
  • HTTP/3: independent streams; a lost packet doesn’t stall others.

7) Security & privacy checks

  • Mixed content blocked (HTTPS page loading HTTP resources).
  • CSP governs what can load/execute.
  • SameSite cookies, CORS, and Referrer‑Policy shape what’s sent cross‑origin.
  • Certificate pinning is legacy; rely on WebPKI + CT logs.

8) Where CDNs fit

  • Terminate TLS close to users, apply caching, compression (Brotli), image transforms, DDoS/WAF, and edge compute (Workers/Functions).
  • Cache keys consider URL + Vary headers; tune to avoid cache misses.
  • Set sane TTLs, stale‑while‑revalidate, and ETags for efficient revalidation.

9) Performance levers (1‑minute checklist)

  • [ ] HTTP/3/H2 enabled; strong TLS (TLS 1.3).
  • [ ] CDN in front of public content; set Cache‑Control wisely.
  • [ ] Ship minimal critical CSS/JS; defer/async non‑critical JS.
  • [ ] Compress (Brotli), preload fonts, optimize images (AVIF/WebP).
  • [ ] Use preconnect/dns‑prefetch to key origins; prefer fewer origins.
  • [ ] Measure: Core Web Vitals, TTFB, CLS, INP, and waterfall.

10) Troubleshooting quick wins

  • Name resolves but site won’t load → check TLS cert (hostname/expiry), firewall, and CDN config.
  • Works on mobile but not desktop → cached DNS; try a different resolver.
  • Slow first view, fast refresh → cache headers missing or huge JS blocking render.
  • Random disconnects → QUIC blocked by network; browser falls back to H2.

Glossary (super short)

  • Origin: scheme + host + port.
  • ALPN: protocol negotiation during TLS (e.g., h2, h3).
  • SNI: hostname in TLS ClientHello so the right cert is served.
  • Service worker: script that intercepts requests for offline/edge logic.
  • H3/QUIC: HTTP/3 over QUIC (UDP), low‑latency, stream‑multiplexed.
← Back to all posts