"What Happens When You Type a URL and Hit Enter" - Full Walkthrough

This question tests whether an engineer understands both the macro architecture and the micro-details. Structure your answer in 5 clean chronological acts:

Act I: The Browser & URL Parsing

• Browser parses https://systemdesign.dev/topics.
• Checks HSTS (HTTP Strict Transport Security) list to force HTTPS before sending a single plaintext byte.
• Checks the browser cache for a prior response to this URL.

Act II: Resolving the Address (DNS & ARP)

• Checks Browser DNS Cache, OS DNS cache, /etc/hosts.
• If missed, performs Recursive DNS lookup to get the Anycast IP.
• Uses ARP (Address Resolution Protocol) to find the default gateway router's MAC address on the local network.

Act III: Establishing Transport & Security (TCP + TLS)

• TCP 3-way handshake (SYN, SYN-ACK, ACK).
• TLS 1.3 cryptographic handshake (ECDHE key exchange + Certificate validation).

Act IV: Ingress, Server Compute & Storage

• Request hits Cloudflare edge CDN → AWS ALB → Microservice pod.
• Database reads row from memory cache or B-Tree index.
• Returns HTTP/2 multiplexed stream with 200 OK.

Act V: The Critical Rendering Path

• Browser constructs DOM (Document Object Model) and CSSOM (CSS Object Model).
• Computes Render Tree, runs Layout (reflow), and Paints pixels via GPU.

Before the first network byte is sent, modern browsers check the HSTS Preload List — a hardcoded list of domains embedded in Chrome, Firefox, Safari, and Edge source code that must always be accessed over HTTPS.

Without HSTS preload, the very first request to a new domain could be HTTP (even if the domain supports HTTPS), allowing a SSL-stripping attack where a Man-in-the-Middle intercepts the first HTTP request and downgrades all subsequent traffic to plaintext.

For your domain to be on the preload list, you must:

1. Serve a valid HSTS header: Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
2. Serve HTTPS on port 443 with a valid certificate
3. Redirect all HTTP to HTTPS
4. Submit your domain at https://hstspreload.org

Removal from the preload list takes 6-12 months to propagate — this is a one-way door. Ensure all subdomains can serve HTTPS before preloading.

The browser's rendering pipeline is a sequence of stages, each blocking the next:

1. HTML Parsing → DOM: Browser incrementally parses HTML bytes into a Document Object Model tree. Blocking <script> tags without async or defer pause parsing.
2. CSS Parsing → CSSOM: All CSS files are fetched and parsed into a CSS Object Model. Render-blocking — no pixels painted until CSSOM is complete.
3. DOM + CSSOM → Render Tree: Combines structural DOM with styling CSSOM. Invisible elements (display: none) are excluded.
4. Layout (Reflow): Browser calculates exact positions and sizes of every visible element on the viewport.
5. Paint: Fills pixels — text, colors, images, borders are rasterized into bitmap layers.
6. Compositing: GPU composites multiple layers (for CSS transforms, z-index) into the final frame buffer.

Time-to-First-Byte (TTFB) measures the wait before any HTML arrives. First Contentful Paint (FCP) measures when the first content pixel appears. Largest Contentful Paint (LCP) — the primary Core Web Vital — measures when the main content element finishes rendering (target: <2.5 seconds).

On subsequent visits, a Service Worker (a background JavaScript file registered by the PWA) intercepts all fetch requests before they hit the network. It can:

• Return a cached response instantly from the Cache Storage API (sub-1ms)
• Implement stale-while-revalidate: serve cached version immediately, update cache in background
• Enable full offline functionality by serving entirely from cache

Combined with:

• HTTP/2 Push / <link rel=preload>: Pre-fetching critical resources before they're discovered in HTML
• Long-term CDN caching of content-hashed JS/CSS bundles (cache-control: immutable)
• DNS pre-resolution (<link rel=dns-prefetch href="//api.example.com">) to eliminate DNS lookup latency for API calls

A well-optimized returning visitor experience can achieve <100ms page loads with service workers serving from cache.