The Browser Engine
When you enter a URL, the browser retrieves the HTML payload. The browser engine (like V8 for Chrome or SpiderMonkey for Firefox) must parse this text and convert it into a visual representation.
This process is known as the Critical Rendering Path. Optimizing this path is the key to achieving fast Core Web Vitals (LCP, FCP).
Building the DOM and CSSOM
First, the browser parses the HTML markup into a Document Object Model (DOM) tree. This tree represents the semantic structure of the page.
Simultaneously, it parses CSS stylesheets into the CSS Object Model (CSSOM). The browser blocks rendering until the CSSOM is fully constructed, because applying styles late would cause a Flash of Unstyled Content (FOUC).
The Render Tree and Painting
The DOM and CSSOM are combined to form the Render Tree, which contains only the nodes required to render the page (e.g., hidden elements are excluded).
Next, the Layout step calculates the exact position and size of each object. Finally, the Paint step converts these calculations into actual pixels on the screen.