How Browsers Render Pages: Inside the Rendering Engine and Critical Path

For front‑end developers, understanding how a browser turns a URL entered in the address bar into a rendered page is essential for building performant web applications.

Browser Architecture

A typical browser consists of seven major parts:

User Interface – address bar, back/forward buttons, etc.

Browser Engine – coordinates the lower‑level components.

Rendering Engine – parses HTML/XML and CSS, producing a visual representation.

Networking – handles HTTP requests and responses.

UI Backend – draws native UI elements using the operating system.

JavaScript Interpreter – parses and executes JavaScript code.

Data Storage – persists cookies, cache, and other data.

Browser Engines

Major browsers use different engines:

Trident – Internet Explorer

WebKit – Chrome and Safari

Gecko – Firefox

Network Process

When a user requests a page, the browser performs the following steps:

Resolve the domain name via DNS to obtain an IP address.

Send an HTTP request to the server at that IP.

Receive and parse the HTTP response.

Load the HTML document and any referenced resources (CSS, JavaScript, images, media, etc.).

Critical Rendering Path

The rendering engine follows a well‑defined pipeline, often called the Critical Rendering Path:

Build the DOM tree by parsing the HTML markup.

Build the CSSOM tree by parsing CSS stylesheets.

Execute JavaScript, which may modify the DOM or CSSOM.

Construct the render tree by combining the DOM and CSSOM.

Perform layout (also known as reflow) to calculate the position and size of each render‑tree node.

Paint the pixels on the screen.

Browsers aim to display content as early as possible, incrementally rendering portions of the page rather than waiting for the entire document to be parsed.

Parsing Order and Script Handling

Browsers parse the document top‑to‑bottom. When a <script> tag is encountered, the script is fetched (if external) and executed synchronously, blocking further parsing until it finishes. The defer and async attributes allow scripts to load asynchronously and defer execution, reducing blocking.

Style sheets do not block parsing because they do not modify the DOM structure, although some browsers may delay script execution until required styles are available. Firefox blocks all scripts when a pending stylesheet is not yet loaded, while WebKit only blocks scripts that depend on the missing stylesheet.

DOM Tree Construction

The browser creates a tree of nodes representing the HTML structure. For example, given a simple HTML snippet, the resulting DOM tree is visualized in the accompanying diagram.

Render Tree Construction

After the DOM and CSSOM are ready, the browser builds the render tree, which represents the visual layout. Each render object corresponds to a DOM node, but hidden elements (e.g., display:none) are omitted. In WebKit the structure is called a render tree; in Gecko it is referred to as a frame tree.

Layout (Reflow)

Layout calculates the exact position and size of every render object. The algorithm works recursively from the root render object down to its children:

Compute the width of the current object.

Iterate over each child:

Set the child's coordinates.

If the child requires its own layout, compute its height.

Set the height of the current object based on the accumulated heights of its children, margins, and padding.

Page Rendering Optimizations

To minimize work during the critical rendering path, follow these best practices:

Keep the HTML structure shallow (no more than six levels deep).

Place scripts at the end of the body or use defer / async.

Inline only essential above‑the‑fold CSS.

Simplify CSS selector hierarchy.

Reduce DOM manipulation in JavaScript and cache style information.

Avoid frequent style changes via JavaScript; prefer toggling CSS classes.

Animate only elements with absolute or fixed positioning.

Pause animations when they are off‑screen or during scrolling.

Cache DOM queries and keep selectors short.

Enable DNS pre‑fetching for external domains.