Understanding DOM, CSSOM, Render Tree.
The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance. The critical rendering path includes the Document Object Model (DOM), CSS Object Model (CSSOM), render tree, and layout.
The document object model is created as the HTML is parsed. The HTML may request JavaScript, which may, in turn, alter the DOM. The HTML includes or makes requests for styles, which in turn builds the CSS object model. The browser engine combines the two to create the Render Tree. Layout determines the size and location of everything on the page. Once the layout is determined, pixels are painted to the screen.
Optimizing the critical rendering path improves the time to first render. Understanding and optimizing the critical rendering path is important to ensure reflows and repaints can happen at 60 frames per second, to ensure performant user interactions, and avoid jank.
DOM is made
When a user hits the URL in the browser, a request is sent to the server and after that, the browser received the marker called HTML. That HTML it’s just text, so to convert that text to DOM,
The HTML response turns into tokens which turn into nodes which turn into the DOM Tree. A single DOM node starts with a startTag token and ends with an endTag token. Nodes contain all relevant information about the HTML element. The information is described using tokens.
CSSOM is made.
The CSS Object model creation it’s generated like the DOM but with some differences.
After reading the characters need to identify the correct tokens. As you see here there not < > tokens that indicate where to start or finalize each token as we have on the DOM. For that, CSS has its own set of rules to identify who should parse that text.
First, the browser will start to parse the body tag.
Then, found the p tag, and as the specification mentioned, the body will contain all the nodes, so the browser recognizes that relationship.
And then keep parsing all CSS tags like shown in the image below.
Render Tree
The CSSOM and DOM trees are combined into a render tree, which is then used to compute the layout of each visible element and serves as an input to the paint process that renders the pixels to the screen. Optimizing each of these steps is critical to achieving optimal rendering performance. Both of these are independent objects that capture different aspects of the document: one describes the content, and the other describes the style rules that need to be applied to the document.
TL;DR
- The DOM and CSSOM trees are combined 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.
To construct the render tree, the browser performs the following.
Starting at the root of the DOM tree, traverse each visible node.
- Some nodes are not visible (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.
Resources:
