What Happens in the Browser Before Rendering?

What Happens in the Browser Before Rendering?

The browser does more than display HTML. It parses markup, downloads dependencies, executes scripts, computes layout, and paints the final result. Understanding this pipeline helps you diagnose slow startup.

Parse HTML

The HTML parser turns markup into the DOM tree. While parsing, it discovers CSS, scripts, images, and fonts, which may trigger additional network requests.

Build CSSOM

CSS files are parsed into the CSSOM. The browser needs both the DOM and CSSOM before it can render most of the page, which is why CSS is render-blocking by default.

Run JavaScript

Scripts can modify the DOM, attach event handlers, and fetch data. Synchronous scripts block parsing until execution finishes, so script strategy matters for performance.

Layout and Paint

The browser calculates element sizes and positions during layout, then paints visual layers to the screen. Any DOM or style change after that can trigger additional work.

What Slows the Pipeline

• Large CSS files
• Heavy JavaScript bundles
• Too many synchronous scripts
• Large images without sizing
• DOM thrashing from repeated writes

The Takeaway

Rendering is a pipeline, not a single step. Good frontend performance comes from reducing blocking work, avoiding unnecessary reflows, and keeping the critical path short.