Type a URL & Hit Enter Lab (Interactive)
Run the full ten-stage pipeline and toggle DNS, keep-alive, 0-RTT, Redis, and CDN hits to cut total milliseconds. The Phase 1 capstone: keystroke through HSTS, DNS, ARP, TCP, TLS 1.3, edge ingress, server compute, gzip response, and the rendering path.
"Type a URL & Hit Enter" Pipeline Simulator
Ten computed stages from keystroke to LCP: flip caching layers and watch first-visit vs returning-visit latency.
1. Keystroke & URL parse (HSTS check)
0.2 msBrowser parses scheme/host/port, checks the HSTS preload list to force HTTPS, and checks the HTTP cache — a CDN/browser cache HIT can end the journey here.
cumulative: 0.2 ms
2. DNS recursive resolution
—3. ARP & default gateway
—4. TCP 3-way handshake
—5. TLS 1.3 resumption (0-RTT)
—6. Edge ingress → L7 LB → app server
—7. App server + Redis HIT
—8. Response streams back
—9. Critical rendering path
—10. JS hydration & subresources
—How It Works Under the Hood
This classic question unifies the whole phase into one timeline. Before a byte moves, the browser parses the URL and consults the HSTS preload list; DNS cascades browser → OS → resolver → Root → TLD → authoritative; ARP locates the gateway MAC; TCP costs 1 RTT and TLS 1.3 another (both collapsible by keep-alive and 0-RTT resumption). The request then crosses edge CDN/WAF, an L7 balancer, JWT validation, Redis or SQL, and returns compressed — ending in the critical rendering path where DOM plus CSSOM become pixels. Cold visits run 300ms+; a CDN hit with a warm connection collapses that to well under 100ms.
Core Architectural Principles
- Five-act interview structure: Browser parse → DNS/ARP → TCP+TLS → Ingress/Compute/Storage → Render.
- Each cache tier short-circuits downstream cost: HSTS, DNS TTL, keep-alive, CDN HIT, Redis, Service Worker.
- Rendering pipeline is blocking: HTML→DOM, CSS→CSSOM, Render Tree, Layout, Paint, Composite (LCP < 2.5s).
Answer in five acts, one protocol and one latency per act, then ask where to dive deeper. Quantify the levers: "keep-alive removes 2 RTTs, a CDN HIT skips the entire origin, a Service Worker makes visit two sub-100ms." Naming TTFB and LCP as measured KPIs converts a textbook recitation into production engineering.
Ten optimization layers minimize repeat latency but multiply debugging surface — distributed tracing and Core Web Vitals are the counterweights.