Look at the browser rendering process as a whole

The browser rendering process mainly includes the following processes:

  1. Parse HTML, generate DOM tree, parse CSS, generate CSSOM tree.
  2. DOM Tree and CSSOM Tree are combined to generate the Render Tree.
  3. According to the generated rendering tree, backflow (Layout), get node geometry information (location, size).
  4. The absolute pixels of nodes are obtained according to the geometry information obtained by rendering tree and backflow.
  5. Send the pixels to the GPU and display them on the page.

Generate A DOM tree

  1. First, the browser reads the binary data of the HTML file from memory or the network and converts it into a string and then into a Token.
  2. The Token identifies whether the current string is a start tag, an end tag, or text.
  3. Node objects are created immediately after each Token is generated, and finally a DOM tree is generated.

Generate the CSSOM tree

Once the browser gets the CSS, it first recognizes the Token, then builds the node and generates the CSSOM tree, much like building a DOM tree.

Third, generate render tree

Once the DOM tree and the CSSOM tree are generated, the combination of the two trees is called the render tree. It is important to note that the render tree is not simply a combination of the two. The render tree only contains the node to be displayed and the style information of the node. If a node is display: None, it will not appear in the render tree.

  • What if the rendering process encounters a JS file?

Because the browser has GUI thread and JS engine thread, the two threads are mutually exclusive, JS loading, parsing and execution will block DOM construction, so in order to quickly render the first screen, we should try to reduce loading JS files in the first screen, try to put the script tag at the bottom of the body tag.

  • What if the browser hasn’t finished building the CSSOM tree and wants to run the JS script?

In this case, the browser downloads and builds CSSOM, then executes the JS script, and finally builds the DOM.

Fourth, reflux layout

Calculate the exact position and size of the elements in the device viewport based on the generated render tree. This stage of calculation is called backflow. To find out the exact position and size of each object on the site, traverse from the root node.

Fifth, redrawn

After the backflow layout, we now know the style and location of the nodes. We can then convert each node of the rendered tree to an actual pixel on the screen, which is called a redraw.

FAQ Summary

RQ1: Are CSSOM trees and DOM trees parsed at the same time?

The browser will download the HTML parsing page to generate a DOM tree and start parsing CSS when it encounters CSS tags. This process will not block. However, if the JS script is encountered, if the CSSOM is not completed, it needs to wait for the COMPLETION of the CSSOM to execute the JS script and then perform DOM parsing, which will block.

RQ2: What do I mean by layering in browser rendering?

Usually page composition is very complicated, especially some page contains some complex animation effects, if there is no hierarchical mechanism, from the layout tree generated directly to the target icon, when every minute changes page to re-flow and re-paint, will seriously affect the performance of layered is similar to a picture of the PS can be divided into many layers, The operation of breaking up a material into layers is layering.

RQ3: What is the timing of redrawing and reflow?

Backflow occurs:

  • When the page is first rendered
  • When the browser window size changes
  • Add or remove visible DOM elements
  • The position of the element changes
  • The size of the element changes
  • Content changes
  • Font size changes

Redraw occurs but does not flow

  • A situation where the style of an element on a page changes but the position does not change. (e.g. color, background, etc.)

Note: reflux must redraw, redraw does not necessarily reflux.

RQ4: Who affects performance more, reflux or redraw?

Backflow, because sometimes when an element backflows, it causes the elements around it to backflow.

RQ5: How to reduce backflow and redraw?

  • Use visibility instead of display: None, the former will only cause redraw, and the latter may cause backflow.
  • Manipulating the DOM offline, such as through document.fragment, and then bringing elements back into the document.

Reference documentation

  • Aliwang – Browser rendering process