Solution

1. DOM & CSSOM

• Bytes → Characters → Tokens → Nodes → DOM.
• The browser parses HTML to build the DOM.
• Simultaneously, it parses CSS to build the CSSOM (CSS Object Model).

2. Render Tree

The DOM and CSSOM are combined to form the Render Tree. This tree contains only the nodes required to render the page (e.g., display: none elements are excluded).

3. Layout & Paint

• Layout (Reflow): The browser calculates the geometry (position and size) of each node in the Render Tree.
• Paint: The browser fills in the pixels (colors, images, borders).
• Composite: Layers are stacked together.

4. Blocking

JavaScript (<script>) blocks DOM construction unless async or defer is used. This is because JS can modify the DOM or CSSOM while it is being built.