How Browsers Load Pages
From URL to pixels: networking, parsing, and rendering
From URL to Pixels
When you type a URL and press Enter, the browser performs several steps to turn code into pixels. Understanding this pipeline helps you write faster, more reliable HTML.
1) Network & Server Response
- DNS lookup: Finds the server IP for the domain.
- TCP connection: Opens a connection to the server.
- TLS handshake: Encrypts the connection for HTTPS.
- HTTP request: Browser requests the HTML document.
- HTTP response: Server returns HTML, headers, and caching info.
Parsing: HTML → DOM, CSS → CSSOM
HTML Parsing (DOM)
The browser reads HTML top-to-bottom and builds the Document Object Model (DOM). Each element becomes a node in the tree.
CSS Parsing (CSSOM)
Stylesheets are parsed into the CSSOM. The browser combines DOM + CSSOM to create the Render Tree.
The Rendering Pipeline
- Style: Compute styles for each node.
- Layout: Calculate sizes and positions.
- Paint: Draw pixels (text, colors, borders, images).
- Composite: Merge layers into the final frame.
Changes to layout properties (like width/height) can trigger reflow, while transforms often composite faster.
Scripts and Blocking
JavaScript can pause HTML parsing. Use defer or async for non-critical scripts.
Blocking Script
<script src="app.js"></script>Parsing stops until the script downloads and executes.
Non-blocking Script
<script src="app.js" defer></script>defer runs after HTML parsing is complete.
✓ Speed Tips That Matter
- ✓ Keep HTML lean and avoid massive inline scripts.
- ✓ Load CSS early and defer non-critical JavaScript.
- ✓ Compress assets and enable caching headers.
- ✓ Optimize images and use modern formats (WebP/AVIF).
- ✓ Preload critical fonts and styles for faster rendering.