Browser rendering process

  • Parsing the HTML, building the DOM tree (where the external chain is encountered, the request will be made)
  • Parses the CSS and generates the CSS rule tree
  • Combine DOM tree and CSS rules to generate render tree
  • Render tree (Layout/reflow), responsible for each element size, location calculation
  • Render the Render tree (paint), which draws the page pixel information
  • The browser sends each layer of information to the GPU, which composes the layers and displays them on the screen

1. Build a DOM tree

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet"> <title>Critical Path</title> </head> <body> <p>Hello <span>web performance</span> students! </p> <div><img src="awesome-photo.jpg"></div>
  </body>
</html>
Copy the code

Both DOM and CSSOM need to go through the process of Bytes → characters → Tokens → Nodes → Object Model.

DOM tree building process: The next sibling of the current node is built only after all the children of the current node are built.

2. Build the CSSOM tree

As mentioned above, the CSSOM construction process is also a tree structure. In the final calculation of the style of each node, the browser will start from the general properties of the node (such as the global style set in the body), and then apply the specific properties of the node. Also note that each browser has its own default style sheet, so many times this CSSOM tree is just a partial replacement for that default style sheet.

3. Generate render tree

The DOM tree and the CSSOM tree are combined to produce the Render tree

Briefly describe the process:

The DOM tree traverses visible nodes from the root node. The “visible” is emphasized here because if you encounter a setting like display: None; Undefined nodes will be skipped during render (but visibility: hidden; Opacity: 0; function: none; function: none; function: none; function: none; function: none

4. The Layout arrangement

You have style information and attributes for each node, but you don’t know the exact location and size of each node, so you use layout to translate style information and attributes into the relative size and position of the actual visual window.

5. Paint Paint

Everything is ready, and all you need to do is to render each node with the right location and size to the actual pixels on the screen via the GPU.

Tips

  • In the above rendering process, the first 3 points may be executed several times, such as JS script to manipulate the DOM, change the CSS style, the browser has to rebuild the DOM, CSSOM tree, re-render, re-layout, paint;
  • Layout comes before Paint, so every time a Layout is reflow, you have to start painting again, which consumes the GPU.
  • Paint does not necessarily trigger a Layout, such as changing a color or background. (Repaint)
  • Layout and Paint will start again after images are downloaded.

When reflow and Repaint are triggered

  • Reflow: According to the Render Tree layout (geometry attributes), meaning that the content, structure, position, or size of the element has changed, requiring recalculation of styles and Render trees;
  • Repaint: Means that the changes to the element only affect some of the node’s styles (background color, border color, text color, etc.), just apply the new style to the element.
  • Reflow is more expensive than repaint, and a node’s reflow often results in a child node’s reflow and its sibling’s reflow.