Browser rendering process

Browser rendering process:

1. The browser parses the HTML into a DOM Tree;
2. Parse CSS into a CSSOM (CSS Object Model) tree;
3. Composite Rendering Tree: Combine the DOM tree and CSSOM tree into a Rendering Tree rendering tree;
4. With the rendering tree, the browser already knows which nodes in the HTML of the document and the CSS styles of each node and their affiliation. The next step is Layout to calculate the position of each node on the screen.
5. The last is to draw.

Reflow Reflow:

    Each element in the Dom structure has its own box (model), which requires the browser to calculate according to the css style and place the element in the position where it should be placed according to the calculation result. This position is called Reflow.

    Which actions trigger Reflow:

        1. Adding, deleting, and modifying DOM nodes will trigger reordering and redrawing;

        2. Move the position of the DOM;

        3. Modify the style of the element;

        4. Modify the default font of the web page.

Repaint Repaint:

    When the position, size, color and other properties of the box are determined, the browser will draw these elements according to these characteristics, a process called Repaint.

What action will trigger a repaint:

    Whether it's a Dom change or a CSS change, any changes to the current display will trigger a repaint.

    How to redraw as little as possible: try to change multiple Dom operations into one operation