DEV Community

Himanshu Gupta
Himanshu Gupta

Posted on

1

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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more