What Happens When You Type a URL in the Browser Address Bar?

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/defer on scripts, inline critical CSS
• Render: Avoid layout thrashing, use transform for animations

Real Production Tip

At Google, we use the Navigation Timing API to measure each phase:

const timing = performance.getEntriesByType('navigation')[0];
console.log('DNS:', timing.domainLookupEnd - timing.domainLookupStart);
console.log('TCP:', timing.connectEnd - timing.connectStart);
console.log('TTFB:', timing.responseStart - timing.requestStart);
console.log('DOM Parse:', timing.domInteractive - timing.responseEnd);

Summary

URL parsing → DNS → TCP → TLS → HTTP → Server → Parse → Render → Paint → Composite. Understanding each step lets you optimize the right bottleneck.