By Rahul — Google Frontend Engineer
The Complete Journey
This is the most asked interview question across all levels. Here is every step, explained simply.
Step 1: URL Parsing
The browser parses the URL into components: protocol (https), domain (www.google.com), path (/search), query string (?q=hello). If you type just "google.com", the browser adds "https://" automatically.
Step 2: DNS Resolution
Browser needs to find the IP address for the domain. It checks: browser cache → OS cache → router cache → ISP DNS resolver → root servers → TLD servers → authoritative server. This can take 20-120ms.
Step 3: TCP Connection
Browser initiates a TCP 3-way handshake with the server: SYN → SYN-ACK → ACK. This takes 1 RTT (round-trip time).
Step 4: TLS Handshake
For HTTPS, an additional TLS handshake occurs. In TLS 1.3, this adds 1 RTT. In TLS 1.2, it is 2 RTTs.
Step 5: HTTP Request
Browser sends the HTTP request with headers (User-Agent, Accept, Cookie, etc.).
Step 6: Server Processing
Server receives request, processes it (routing, database queries, template rendering), and sends back an HTTP response with status code and body.
Step 7: HTML Parsing
Browser receives HTML and starts parsing it into a DOM tree. When it encounters CSS, it builds the CSSOM. When it encounters scripts, it may pause parsing (unless async/defer).
Step 8: Render Tree
Browser combines DOM and CSSOM into a Render Tree. Elements with display: none are excluded.
Step 9: Layout
Browser calculates the exact position and size of every element. This is also called "reflow".
Step 10: Paint
Browser fills in pixels — colors, borders, shadows, text. Complex properties like box-shadow are more expensive to paint.
Step 11: Compositing
Layers are composed together. Elements with transform, opacity, or will-change get their own compositor layer, which can be animated without repainting.
Performance Optimizations at Each Step
- DNS:
dns-prefetch,preconnect - Connection: HTTP/2, HTTP/3 (QUIC eliminates handshake)
- Request: CDN, edge computing
- Parsing:
async/deferon scripts, inline critical CSS - Render: Avoid layout thrashing, use
transformfor animations
Real Production Tip
At Google, we use the Navigation Timing API to measure each phase:
Summary
URL parsing → DNS → TCP → TLS → HTTP → Server → Parse → Render → Paint → Composite. Understanding each step lets you optimize the right bottleneck.