This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact.

Note: Part of the article content and pictures from the network, if there is infringement please contact me (homepage public number: small siege lion learning front)

By: Little front-end siege lion, home page: little front-end siege lion home page, source: Nuggets

GitHub: P-J27, CSDN: PJ wants to be a front-end siege lion

Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.

The browser parses the rendered page

The process is briefly

After the browser kernel gets the content, the rendering steps can be roughly divided into the following steps:

  1. Parse the HTML and build the DOM tree

  2. Parses the CSS and generates the CSS rule tree

  3. Combine DOM tree and CSS rules to generate render tree

  4. Render tree (Layout/reflow), responsible for each element size, location calculation

  5. Render the render tree to draw the page pixel information

  6. The browser sends each layer’s information to the GPU, which then composes the layers and displays them on the screen

OS:– Reflow: also known as layout, the Chinese is called backflow/rearrangement, generally means that the content, structure, position or size of the element has changed, the need to recalculate the style and render tree, this process is called reflow.

Repaint: When the changes to the element only affect the appearance of the element (e.g. background color, border color, text color, etc.), just apply the new style to the element.

The process,

1. Parse the DOM tree based on HTML
  • According to the content of HTML, the tag is parsed into a DOM tree according to the structure, and the process of DOM tree parsing is oneDepth-first traversal. That is, all children of the current node are built before the next sibling node is built.
  • In the process of reading the HTML document and building the DOM tree,If a Script tag is encountered, construction of the DOM tree is paused until the script completes execution.
2. Generate a CSS rule tree based on CSS resolution
  • Js execution is paused while the CSS rule tree is parsed until the CSS rule tree is ready.
  • Browsers do not render until the CSS rule tree is generated.
3. Generate a rendering tree by combining DOM tree and CSS rule tree
  • After the DOM tree and CSS rule tree are all ready, the browser will startBuilding a Render tree.
  • Simplifying CSS can also speed up the building of CSS rule trees, resulting in faster pages.
4. Calculate the information of each node according to the render tree (layout)
  • Layout: Calculates the layout of each render object from the render object information in the render treePosition and dimensions
  • Backflow: After the layout is complete, it is found that something has changed that affects the layout and needs to be rewoundRe-render.
5. Draw the page based on the calculated information
  • In the rendering phase, the system will traverse the rendering tree and call the renderer’s"Paint" methodTo display the contents of the renderer on the screen.
  • Redraw: Attributes such as the background color, text color, etc. of an element that do not affect the layout around or inside the element will only cause the browser to redraw.
  • Backflow: If the size of an element changes, the render tree needs to be recalculated and re-rendered.

Consider: How to reduce backflow and redraw?

We all know that Reflow takes more time than Repaint and therefore has a greater impact on performance. Try to avoid too many reflows. So what’s the solution?

Let’s start by reviewing the flow of the rendering pipeline:

To minimize backflow and redraw times and improve performance, we first need to know the trigger conditions.

Common situations that trigger backflow:

  1. The geometry of a DOM element changes. Common geometry properties arewidth,height,padding,margin,left,top,borderWait, that’s easy to understand.
  2. Make the DOM node happenIncrease or decreaseormobile.
  3. Read and writeoffsetThe family,scrollandclientIn order to retrieve these values, the browser needs to perform a backflow operation.
  4. callwindow.getComputedStyleMethods.

Now let’s look at the backflow process.

Following the rendering pipeline above, when backflow is triggered, if the DOM structure changes, the DOM tree is re-rendered and the rest of the process (including tasks outside the main thread) is completed.

It’s like going through the parsing and composition process all over again, and it’s very expensive.

Common situations that trigger redraw:

Repaint occurs when DOM changes result in style changes that do not affect geometry properties.

Redraw process: Since there are no changes to the DOM geometry, the element position information does not need to be updated, eliminating the need for layout. The process is as follows:

Skip the stages of generating layout trees and building layer trees, directly generate the drawing list, and then continue the following series of operations, such as partitioning, bitmap generation.

So redrawing doesn’t necessarily cause backflow, but backflow must have redrawn.

Knowing the principles above, what are the implications for the development process?

  1. Avoid using style too often, and instead modify itclassThe way.
  2. usecreateDocumentFragmentPerform batch DOM operations.
  3. For resize, scroll, etc., perform anti-shake/throttling.
  4. Add will-change: Tranform and have the rendering engine implement a separate layer for it. When these transformations occur, only the composition thread is used to process them without involving the main thread, greatly improving rendering efficiency. Of course, this change is not limited totranform, any CSS property that can be synthesizedwill-changeTo declare.

PS: To learn more about redrawing and repainting, check out my article 🔥 What is Redrawing and rearranging? How to avoid it?

Thank you for reading, I hope to help you, if there is a mistake or infringement of the article, you can leave a message in the comment area or add a public number in my home page to contact me.

Writing is not easy, if you feel good, you can “like” + “comment” thanks for your support ❤