What Happens When You Type a URL in Your Browser (DNS to Rendering)

Understanding what happens behind the scenes when you enter a URL in your browser can help you optimize web applications and troubleshoot performance issues. Let's walk through the complete process step by step.

1. When You Enter a URL

When you type a URL like www.google.com into your browser's address bar and press Enter, several things happen immediately:

DNS Lookup Starts: The browser begins resolving the human-readable domain name (www.google.com) into its corresponding machine-readable IP address (for example, 91.124.94.99). This is necessary because computers communicate using IP addresses, not domain names.
TCP Connection Established: Once the IP address is resolved, the browser initiates a Transmission Control Protocol (TCP) connection with the server using the three-way handshake:
1. SYN: Client sends a synchronize packet to the server
2. SYN-ACK: Server responds with a synchronize-acknowledge packet
3. ACK: Client sends an acknowledge packet back to the server

2. Fetching Data

With the TCP connection established:

The browser sends an HTTP request to the server asking for the requested resource
The server processes the request and responds with the requested page components (HTML, CSS, JavaScript, images, etc.)

3. Parsing

As soon as the first chunk of data arrives (even before the full file is downloaded), the browser begins parsing:

HTML Parsing: Creates the Document Object Model (DOM) tree from the HTML
CSS Parsing: Creates the CSS Object Model (CSSOM) from the CSS
These two trees are then combined into a render tree, which determines what should be displayed on the page and how

4. Preloading

The browser's preload scanner identifies high-priority resources that will be needed soon (like critical CSS, JavaScript, or fonts) and initiates requests for them in parallel with the main HTML parsing to improve performance.

5. JavaScript Execution

The browser's JavaScript engine parses and executes JavaScript code
JavaScript can modify the DOM or CSSOM, which may trigger additional rendering work
Long-running JavaScript can block the main thread, delaying page interactivity

6. Rendering

Layout Calculation: The browser calculates the exact size and position of every element on the page (this is also called "reflow")
Painting: The browser fills in pixels for each element onto layers
Compositing: The browser combines layers into the final image that gets displayed on the screen

7. User Interaction

Once the initial render is complete, the user can now interact with the page:

Clicking buttons, filling forms, scrolling, etc.
The browser processes these interactions and may trigger additional rendering cycles as needed

Performance Implications

Understanding this process helps explain why certain optimization techniques work:

Minimizing round trips: Reducing DNS lookups, TCP handshakes, and HTTP requests improves load time
Critical rendering path: Prioritizing resources needed for the initial render (above-the-fold content)
JavaScript optimization: Minimizing main thread work and avoiding long-running scripts
Resource hints: Using preload, prefetch, and dns-prefetch to help the browser anticipate needs

Modern browsers continue to improve this process with features like:

HTTP/2 and HTTP/3 for more efficient connections
Service workers for offline capabilities and background processing
CSS containment and layout isolation to limit rendering scope
Advanced caching mechanisms and memory management

By understanding what happens under the hood, you can make informed decisions to build faster, more responsive web applications.

FAQ

How long does each step of loading a URL take?

Rough order of magnitude: DNS lookup 20–120 ms (cached: ~0), TCP handshake one round trip (~30–100 ms), TLS another round trip, first byte of HTML depends on the server, and parsing plus rendering happen in milliseconds for simple pages. Every step after DNS and TCP is why CDNs and edge servers matter — they shorten the physical distance.

What is the critical rendering path?

It's the sequence of resources the browser must fetch, parse, and execute before it can render the first pixel: the HTML document, blocking CSS, and blocking JavaScript. Minimizing and prioritizing those resources is the fastest way to improve First Contentful Paint.

What is the difference between layout, painting, and compositing?

Layout (reflow) calculates the geometry of every element, painting fills pixels onto layers, and compositing merges those layers on the GPU. Layout is the most expensive — animating properties that only trigger compositing, like transform and opacity, is the cheapest to render.

Does HTTP/2 or HTTP/3 change any of this?

They reduce the cost of the connection phase. HTTP/2 multiplexes many requests over one TCP connection, eliminating the need for domain sharding, and HTTP/3 replaces TCP with QUIC over UDP, cutting handshake latency and avoiding TCP head-of-line blocking.