Walk through the entire process from typing a URL to seeing the page

Process overview

Type URL
  ↓ 1. URL parsing & cache check
  ↓ 2. DNS lookup
  ↓ 3. TCP connection (+ TLS handshake)
  ↓ 4. Send HTTP request
  ↓ 5. Server response
  ↓ 6. Parse HTML
  ↓ 7. Load resources (CSS, JS, images)
  ↓ 8. Render (Layout → Paint → Composite)
  ↓ 9. Page is interactive

1. URL parsing & cache check

• The browser parses the URL (protocol, hostname, path, query string)
• Checks the HTTP cache (strong cache) — if there's a fresh hit, return it immediately
• If the input is not a valid URL, it may be sent to the default search engine

2. DNS lookup

Resolve the domain name to an IP address. Lookup order:

1. Browser DNS cache
2. OS DNS cache (/etc/hosts)
3. Router cache
4. ISP DNS server
5. Recursive resolution (Root → TLD → Authoritative DNS)

3. TCP connection + TLS handshake

• TCP 3-way handshake: SYN → SYN-ACK → ACK to establish a reliable connection
• For HTTPS: TLS handshake on top of TCP — negotiates cipher suite, exchanges certificate, establishes a shared session key
• HTTP/2 multiplexes streams; HTTP/3 uses QUIC (UDP) to eliminate the TCP handshake overhead

4. Send HTTP request

GET /index.html HTTP/2
Host: www.example.com
Accept: text/html
Cookie: ...

If the browser has cached validators, it includes If-None-Match / If-Modified-Since.

5. Server response

• The server processes the request and returns HTML (200 OK)
• A CDN edge node may respond directly, reducing latency
• For 301/302, the browser redirects to the new URL

6. Parse HTML

The browser parses the HTML as it streams in:

• Builds the DOM tree
• Finds <link rel="stylesheet"> → fetches CSS and builds the CSSOM tree
• Finds a render-blocking <script> (no async/defer) → pauses HTML parsing, downloads, and executes JS
• DOM + CSSOM → Render Tree

7. Resource loading

Resource	Behaviour
CSS	Render-blocking (CSSOM must be built)
JS (no attribute)	Parser-blocking + render-blocking
JS (defer)	Downloads in parallel, executes after HTML is parsed
JS (async)	Downloads in parallel, executes as soon as downloaded
Images	Non-blocking

8. Render pipeline

Render Tree
  ↓ Layout  (calculate size and position of every element)
  ↓ Paint   (draw pixels to layers)
  ↓ Composite (merge layers, send to GPU for display)

Key milestones:

• FCP (First Contentful Paint) — first text or image is drawn
• LCP (Largest Contentful Paint) — largest content element is painted
• TTI (Time to Interactive) — page is fully interactive

9. JS execution / interactive

• DOMContentLoaded fires — HTML parsed, DOM ready
• load fires — all resources finished loading
• Page is ready for user interaction

Bonus: optimisation opportunities (good to mention in interviews)

• DNS Prefetch — resolve DNS early for third-party domains
• Preconnect — establish TCP + TLS early
• Preload — fetch critical resources before they're discovered in HTML
• HTTP/2 Server Push — server proactively sends resources
• Service Worker — intercept requests for offline support and custom caching