DEV Community

Himanshu Gupta
Himanshu Gupta

Posted on

How Render-tree work

  • The DOM and CSSOM trees combine to form the render tree.

  • Render tree contains only the nodes required to render the page.

  • Layout computes the exact position and size of each object.

  • The last step is paint, which takes in the final render tree and renders the pixels to the screen.

DOM Tree:
The browser creates the Document Object Model when page load. It is a tree of objects. Each node represents an HTML tag and there details.

Image description

CSSOM Tree:
After the browser had created the DOM tree in the browser, it started creating the CSSOM. Means CSS Object Model. It is basically a “map” of the CSS style which you can find on a web page degine. It is like the DOM but for CSS rules apply.

Image description

Starting at the root of the DOM tree, traverse each visible node.

  • Some nodes are not visible to us(for example, script tags, meta tags, and so on), and are omitted since they are not reflected in the rendered output.
  • Some nodes are hidden via CSS and are also omitted from the render tree.(for example, the span node---in the example above---is missing from the render tree because we have an explicit rule that sets the "display: none" property on it).

For each visible node, find the appropriate matching CSSOM rules and apply them.

Emit visible nodes with content and their computed styles.

Browser's steps:

  1. HTML markup and build the DOM tree.
  2. Process CSS markup and build the CSSOM tree.
  3. Combine the DOM and CSSOM into a render tree.
  4. Run layout on the render tree to compute geometry of each node.
  5. Paint the individual nodes to the screen.

Top comments (0)