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
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.
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.
- 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.
The backbone of an HTML document is tags. According to the Document Object Model (DOM), every HTML tag is an object…
Critical rendering path