Understanding Browser Rendering: How HTML, CSS, and JavaScript Influence Page Rendering and Performance
This article explains the browser's critical rendering path, detailing how HTML is parsed into a DOM, how CSS is turned into a CSSOM, how the render tree is built, and how JavaScript and CSS can block or delay rendering, providing practical examples and performance testing results.
Introduction
Recently I have been optimizing legacy web projects and noticed many developers only have a superficial understanding of how browsers render HTML, CSS, and JavaScript. This article aims to explain the rendering process step by step and discuss whether JS and CSS block rendering.
How Browsers Render HTML
The browser follows a Critical Rendering Path that consists of five stages: constructing the Document Object Model (DOM), constructing the CSS Object Model (CSSOM), building the render tree, performing layout, and finally painting pixels to the screen.
Critical Rendering Path
When an HTML document is received, the browser parses it and creates the DOM, while any linked CSS files are fetched and parsed into a CSSOM. The two trees are then merged into a render tree that contains only visible nodes.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>Constructing the DOM
Parsing the HTML involves four sub‑steps:
Tokenisation : converting raw bytes to characters.
Lexical analysis : breaking the character stream into tokens such as <html> and <body> .
Syntax analysis : turning tokens into objects with defined properties.
DOM tree construction : assembling the objects into a hierarchical tree that represents the document structure.
Constructing the CSSOM
When the browser encounters a link to an external stylesheet, it fetches the CSS file and parses it through the same four stages, producing a CSSOM tree.
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}Generating the Render Tree
The DOM and CSSOM are merged into a render tree that contains only visible nodes with their computed styles. The process includes traversing the DOM, discarding invisible nodes (e.g., those with display:none ), matching CSS rules, and attaching styled nodes to the render tree.
Layout
After the render tree is built, the layout phase calculates the exact position and size of each node, producing a box model with absolute pixel values.
Paint
Finally, the paint phase converts each node in the render tree into actual pixels on the screen, completing the visual rendering of the page.
Does JavaScript Block Rendering?
JavaScript can block rendering in two ways: loading the script file and executing the script. Inline scripts always block because the parser must hand control to the JS engine before continuing. External scripts block parsing when encountered, but they do not necessarily block rendering of earlier DOM nodes.
Inline JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>Hello</div>
<script>
const now = Date.now();
while (Date.now() - now < 500) {}
</script>
</body>
</html>The parser stops at the script tag, executes the blocking code, and only then continues building the DOM, delaying the first paint.
External JavaScript
External scripts are fetched during a pre‑parsing phase. When the parser reaches a script tag without async or defer , it pauses DOM parsing until the script is downloaded and executed. Placing the script in the head delays rendering of later content, while placing it at the bottom allows the browser to render earlier DOM nodes before the script runs.
Defer and Async
defer scripts are downloaded in parallel and executed after the document has been parsed but before the DOMContentLoaded event. async scripts are also fetched in parallel but execute as soon as they finish downloading, which may still block rendering of subsequent DOM nodes depending on network timing.
Does CSS Block Rendering?
Both inline and external CSS block the construction of the render tree. While the CSS file does not stop the parser from building the DOM, the browser will not paint the page until the CSSOM is ready, because style information is required to compute the layout.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div>Hello</div>
</body>
</html>// index.css
body {
color: red;
}When the stylesheet is placed in the head , the first paint is delayed until the CSS is loaded. Moving the link to the bottom allows the browser to paint unstyled content first, then re‑paint after the CSS arrives, which can cause a flash of unstyled content (FOUC) and additional layout work.
Summary of CSS Effects
CSS loading does not block DOM construction.
CSS loading blocks render‑tree construction and therefore delays the first paint.
If CSS appears before a script, it can indirectly delay script execution and subsequent DOM parsing.
Conclusion
The article provides a practical overview of the browser's rendering pipeline, clarifies when JavaScript and CSS block rendering, and offers guidance for performance‑critical page structuring. Understanding these mechanisms helps developers make informed decisions about script placement, async/defer usage, and stylesheet ordering to improve first‑paint times.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.