How a Browser Turns HTML CSS JS into Pixels

This guide walks through the exact pipeline a web browser uses to convert HTML, CSS, and JavaScript into the pixels you see on screen. You’ll learn the key stages—from fetching raw files to painting the final frame—and what happens if something goes wrong at each step.

What You’ll Need

A modern web browser (Chrome, Firefox, Edge, or Safari) with its developer tools open (usually F12 or right-click > Inspect).
A simple web page with some HTML, CSS, and JavaScript—any local file or online page works.
Basic familiarity with HTML tags, CSS selectors, and JavaScript syntax helps, but isn’t strictly required.

Step-by-Step

Start with the URL and fetch the HTML. When you type a URL and press Enter, the browser resolves the domain to an IP address (via DNS), opens a connection (usually HTTPS), and sends a GET request for the HTML document. The server responds with the raw HTML text—this is just a string of characters, not yet a page.
Parse the HTML into tokens and build the DOM tree. The browser’s HTML parser reads the byte stream and converts it into tokens (start tags, end tags, text, attributes). These tokens are then structured into a tree of nodes called the Document Object Model (DOM). Each element like <div> or <p> becomes a node, and nested tags become child nodes. This tree represents the structure and content of the page.
Fetch and parse CSS while building the CSSOM. As the parser encounters <link rel="stylesheet"> or <style> tags, it fetches the CSS files (in parallel where possible) and parses them into a second tree: the CSS Object Model (CSSOM). Each rule maps selectors to declarations (e.g., p { color: red; }). The browser also computes the cascade—which rule wins when multiple selectors match—based on specificity, importance, and source order.
Execute JavaScript (which can modify both trees). When the parser hits a <script> tag (especially without defer or async), it pauses HTML parsing, fetches the script, and executes it. JavaScript can add, remove, or change DOM nodes and CSS rules, which means the DOM and CSSOM are not static—they can be mutated after initial parsing. This is why scripts are often placed at the end of the body or loaded asynchronously to avoid blocking rendering.
Combine DOM and CSSOM into a render tree. The browser walks the DOM and the CSSOM together to create a render tree. This tree contains only the visible elements—nodes with display: none or <head> are omitted. For each visible node, the browser calculates its computed style: the final values of all CSS properties after inheritance, cascading, and defaults (e.g., converting em to px, resolving auto margins).
Perform layout (also called reflow). The browser now calculates the geometry of every render tree node: its position (x, y) and size (width, height) in viewport coordinates. It starts from the root and works down, taking into account the box model (content, padding, border, margin), flexbox or grid rules, floats, and text wrapping. This step is expensive, so browsers try to batch layout changes and avoid triggering it unnecessarily.
Paint each layer. The browser paints the render tree onto layers. Painting involves filling in pixels for backgrounds, borders, text, shadows, and images. Modern browsers use compositing: the page is split into multiple layers (e.g., one for fixed headers, one for animated elements) that are painted separately and then combined. The paint order follows the CSS stacking context (z-index, opacity, transforms).
Composite the layers into the final frame. The compositor takes all the painted layers and blends them together in the correct order to produce a single bitmap. This bitmap is then sent to the GPU to be displayed on your screen. If a CSS transform or opacity change occurs, the browser can skip layout and paint, and just re-composite the existing layers—this is why animations using transform and opacity are smooth.
Handle JavaScript updates and re-run steps as needed. When JavaScript modifies the DOM or styles, the browser invalidates the affected parts. It may re-run layout (if geometry changed), repaint (if visuals changed), or just recomposite (if only transform/opacity changed). The browser batches these updates into frames, typically 60 per second, to match the display refresh rate.
Repeat for every frame during animations or interactions. For a static page, steps 1–8 happen once. For dynamic pages, the loop continues: JavaScript runs, the browser marks what changed, and it redoes the minimal subset of layout, paint, and composite to produce the next frame.

Common Mistakes

Forgetting that CSS is render-blocking. The browser must parse all CSS before it can paint. If a stylesheet is slow, the page appears blank (white flash) until it loads.
Assuming JavaScript runs after the page is fully loaded. Scripts without defer or async execute immediately when encountered, potentially before the DOM is complete.
Confusing the DOM with the HTML source. The DOM is the live, in-memory tree that JavaScript can modify; the HTML file is just the initial source.
Thinking display: none still takes up space. It removes the element from the render tree entirely, so it doesn’t affect layout.
Ignoring the cost of layout thrashing. Reading layout properties (like offsetHeight) in a loop forces the browser to re-layout repeatedly, causing jank.

Tips

Use the browser’s DevTools Performance tab to record a page load and see the exact sequence of parse, layout, paint, and composite events.
Minimize layout and paint by using CSS transforms and opacity for animations instead of animating width or top.
Put <script> tags at the end of the body or use defer to avoid blocking HTML parsing.
Use content-visibility: auto on off-screen sections to skip rendering them until they’re near the viewport.
Keep CSS selectors simple; the browser matches selectors right-to-left, so overly complex selectors can slow down style computation.

Troubleshooting

Page appears blank after loading. Check the console for JavaScript errors—an uncaught exception can stop script execution, but the page should still render HTML. If truly blank, check if a CSS rule hides everything (e.g., body { display: none }) or if the HTML file is empty.
Styles are not applying. Open the Elements panel, select the element, and look at the Computed tab. See which rules are crossed out (overridden) and which are missing. Verify the CSS file loaded (Network tab) and that the selector matches exactly.
JavaScript runs but doesn’t change the page. Confirm the DOM element you’re targeting exists at the time the script runs. If the script is in the head, the body may not be parsed yet—use DOMContentLoaded or defer.
Layout is off (elements overlapping or wrong size). Use the Elements panel’s hover highlighting to see the box model. Check if a parent has a fixed width or if you forgot to clear floats. Try toggling display or position properties one at a time.
Animations are janky. Open the Performance tab and record the animation. Look for purple (layout) or green (paint) bars—those indicate expensive operations. Switch to animating transform and opacity instead.

Frequently Asked Questions

Does the browser really parse the entire HTML before showing anything?

No. Modern browsers parse incrementally and can paint parts of the page before the full HTML is downloaded. However, CSS is render-blocking, so the first paint waits for the CSSOM to be ready.

What’s the difference between the DOM and the render tree?

The DOM includes every element in the HTML, even hidden ones. The render tree only includes visible elements with computed styles. For example, <head> and display: none elements are in the DOM but not the render tree.

Why do CSS animations using `transform` perform better than animating `margin`?

Animating transform only triggers compositing, which is handled by the GPU and doesn’t require layout or paint. Animating margin forces the browser to recalculate layout on every frame, which is CPU-intensive and can cause dropped frames.

Can JavaScript change the CSSOM after the page loads?

Yes. Adding or removing <style> tags, changing style attributes, or calling element.style.property = value updates the CSSOM, which then triggers a re-render of the affected parts.

What is a reflow and why is it expensive?

A reflow (or layout) is the process of recalculating the position and size of elements. It’s expensive because it can affect the entire document—changing the width of a parent can cascade down to all children, and the browser may have to re-layout everything.

How can I see the render tree in DevTools?

There’s no direct render tree view, but the Elements panel shows the DOM, and the Computed tab shows the final styles. The Rendering tab (under More tools) has options like “Paint flashing” and “Layer borders” to visualize paint and compositing.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →