This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

JavaScript blocks DOM parsing, and DOM parsing needs to be paused to execute JavaScript scripts. CSS does not block DOM parsing, but it does affect render Tree synthesis. Render Tree is needed for the final render. Js blocking parsing also blocks rendering.

Browser render page

  • Browsers render pages by building DOM trees and CSSOM trees. Because we want to make sure we get both HTML and CSS to the browser as quickly as possible.
  • The CSSDOM and DOM trees are combined into a render tree, which is then used to compute the layout of each visible element and output it to the rendering process to render the pixels to the screen.
Document Object Model DOM
  1. Browsers read the raw bytes of HTML from disk and the network. And according to the specified encoding of the text, they are converted to each character.
  2. The token is changed
  3. Lexical analysis
  4. The DOM to build
CSS object model CSSOM

When the browser builds the PAGE DOM, it encounters a link tag in the head section of the document. This tag refers to an external CSS style sheet: style.css. Once the browser has sent the request for style.css, we need to convert the CSS rule we receive into something that the browser can recognize, just as with HTML, so we repeat the HTML process: CSS bytes are converted into characters, which are then converted into tokens and nodes, and finally linked into a tree structure called the CSS object model.

Render tree
  1. The DOM tree and the CSSOM tree are merged to form the render tree.
  2. The render tree contains only the nodes needed to render a web page.
  3. The layout calculates the exact position and size of each object.
  4. The final step is rendering, using the final render tree to render the pixels onto the screen.
Steps to build the render tree

  1. Starting at the root of the DOM tree, each visible node is traversed.

    1. Some nodes that are not visible, such as script, meta and tags, will not be mounted to the render tree.
    2. Some nodes will not be mounted to the render tree if display: None is set.

  2. For each visible node, find the appropriate CSSOM rule to match them.

  3. Combine computed styles and visible sections into a Render tree

layout
  • Once we have the render tree, we can proceed to the layout stage.
  • After building the render tree, we have determined which nodes are visible and how they should be computed, but we have not yet calculated their exact position and size within the viewport. This defined stage is the layout stage, also known as the weighing row.
  • The output of the layout process is a box model that accurately captures the exact position and size of each element in the viewport. All relative measurements are converted to absolute pixels on the screen.
  • We now know which nodes are visible, their computational style, and geometric information. We can finally pass this information on to the final stage: converting each node in the render tree into an actual pixel on the screen. This step is often called “drawing” or “rasterizing.”
Summarizing the rendering process

The time required to perform the render tree build, layout, and drawing will depend on the document size, the style applied, and the device on which the document is running: the larger the document, the more work the browser has to do, and the more complex the style, the longer the drawing will take. (For example: color is less expensive to draw, and shadow calculation and more expensive)

  1. Process HTML tags and build dom trees.
  2. Process CSS tags and build CSSOM trees.
  3. Merge the DOM and CSSOM trees into a render tree.
  4. Layout according to render tree to calculate geometric information for each node.
  5. Draw the individual nodes to the screen.

If the DOM and CSSOM are modified, you need to perform all of the above steps once to determine which pixels need to be re-rendered on the screen.

Optimizing the critical render path means minimizing the total time spent performing steps 1 through 5 above. This allows content to be rendered to the screen as quickly as possible, and also reduces the screen refresh time after the first rendering. Higher refresh rates for interactive content.