Understanding the Critical Rendering Path: From DOM and CSSOM to Layout and Paint
This article explains the browser's critical rendering path, detailing how HTML, CSS, and JavaScript are transformed into pixels through DOM construction, CSSOM creation, render tree generation, layout, and painting, and discusses how JavaScript can block and delay these stages.
When we write HTML, CSS, and JavaScript, the browser must convert this code into the actual pixels displayed on the screen. The series of steps it follows is called the Critical Rendering Path .
(Figure 1‑1: Detailed steps of the Critical Rendering Path)
1. Build DOM
The browser reads the HTML bytes, decodes them into characters, tokenises the markup, and creates node objects to form the Document Object Model (DOM) tree. Tokens such as <html> and <title> indicate start and end tags, allowing the browser to maintain parent‑child relationships.
(Figure 1‑6: DOM construction process)
2. Build CSSOM
While the DOM is being built, the browser also parses CSS to create the CSS Object Model (CSSOM). The process mirrors DOM construction: the CSS source is tokenised and node objects are generated.
(Figure 2‑1: CSSOM construction)
body {font-size: 16px;} p {color: red;} p span {display:none;} span {font-size: 14px;} img {float: right;}
The resulting CSSOM links style rules to the corresponding DOM nodes; for example, the body node inherits a 16 px font size.
3. Build Render Tree
After both DOM and CSSOM are ready, the browser merges them into a render tree that contains only visible elements.
(Figure 3‑1: Render tree construction)
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Demos</title> <style> body {font-size: 16px;} p {color: red;} p span {display:none;} span {font-size: 14px;} img {float: right;} </style> </head> <body> <p>Hello berwin </p> <span>Berwin</span> <img src="https://p1.ssl.qhimg.com/t0195d63bab739ec084.png"/> </body> </html>
The render tree is then used for layout and painting.
4. Layout (Reflow)
During layout, the browser calculates the exact position and size of every visible node, producing a box model expressed in absolute pixel values.
(Figure 4‑1: Layout box model)
5. Paint
After layout, the browser issues “Paint Setup” and “Paint” events, converting the render tree into actual screen pixels.
(Figure 5‑1: Painting)
6. JavaScript and the Critical Rendering Path
When the parser encounters a script tag, DOM construction pauses until the script finishes executing. Because JavaScript can modify both the DOM and the CSSOM, the browser must also wait for the CSSOM to be complete before running the script, effectively blocking both DOM and CSSOM construction.
This blocking can double the time needed to reach the next stage. For example, if DOM and CSSOM each take 1 s, the presence of a script can extend the total to 2 s.
(Figure 6‑1: JS blocks DOM while waiting for CSSOM)
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" href="https://static.xx.fbcdn.net/rsrc.php/v3/y6/l/1,cross/9Ia-Y9BtgQu.css"> </head> <body> aa <script>console.log(1);</script> </body> </html>
In this example, DOMContentLoaded fires after 1.21 s, compared with ~116 ms when no script is present.
(Figure 6‑3: CSS‑blocked DOM)
7. Summary
The Critical Rendering Path consists of five main stages: DOM construction → CSSOM construction → render‑tree creation → layout → paint. CSSOM blocks rendering until it is fully built, and a script tag pauses DOM construction until both CSSOM and the script have finished, which can significantly affect page‑load performance.
360 Tech Engineering
Official tech channel of 360, building the most professional technology aggregation platform for the brand.
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.