Rendering / Render Tree

The Rendering Tree (or Render Tree) in web development refers to the internal structure that browsers build to render a webpage on the screen. It is a key part of how the browser's rendering engine works. The render tree is created after the browser processes the DOM and CSSOM (CSS Object Model), combining them to produce the visual content of a webpage.

Here's a breakdown of the Rendering Tree:

DOM (Document Object Model):

This is a tree-like structure created by parsing the HTML document. It represents the structure and content of the webpage.

CSSOM (CSS Object Model):

This is created by parsing the CSS styles of the document. It represents the styling rules and their application to the DOM.

Render Tree:

The rendering tree is constructed by combining the DOM and CSSOM. It includes only visible elements (nodes that have display or visibility set to "none" are excluded). Each node in the render tree contains the computed styles and the visual content necessary for layout and painting (position, size, and other visual information). Rendering Tree Process:

DOM & CSSOM Creation:

The browser parses the HTML to build the DOM and the CSS to create the CSSOM.

Render Tree Construction:

The DOM and CSSOM are combined to build the render tree. Invisible elements (like display: none) are omitted.

Layout (Reflow):

Once the render tree is built, the browser calculates the exact positions and sizes of all the elements. This step is called layout (or reflow).

Painting:

After the layout step, the browser paints the content on the screen by drawing the pixels for each visible element based on the render tree.

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-size: 16px; }
    p { display: none; }
    h1 { color: blue; }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph</p>
</body>
</html>

The DOM will have both the h1 and p elements.
The CSSOM will have rules for body, p, and h1.
The Render Tree will only include the h1 element because the p element is hidden (display: none;).

Key Points:

The render tree only contains elements that are needed for rendering (visible content).
Hidden elements (display: none) or elements that don't affect layout (like head or meta) are not part of the render tree.
The render tree is essential for the browser to compute the layout (positioning and size) of elements and to paint the webpage on the screen.

Here's a breakdown of the Rendering Tree:​

Key Points:​

Here's a breakdown of the Rendering Tree:

Key Points: