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.

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.

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.