Web interview frequently asked questions: the principles and differences between reflow and repaint

The browser's rendering mechanism

1. Browsers use two engines to process pages, and different browsers use different rendering engines

Rendering Engine:

Chrom and Safari use "WebKit",

Firefor uses "Geoko"

js engine

2. The browser will parse HTML into DOM tree, parse css into CSSOM (CSS Object Model);

3. Then the DOM tree and CSSOM will be combined to produce render tree(render tree);

4. After the render tree is completed, the browser will layout according to the render tree. After the layout is completed, a "box model" will be output, which will accurately capture the position and size of each node in the view, and all measurements will be converted into physical pixel values ​​on the screen; (This step will cause回流(reflow) )

5. After the layout is completed, the browser will immediately issue a paint stup event to convert the render tree into screen pixels; (this step will cause重繪(repaint) )

6.After the above steps, the page will be displayed on the screen.

Note that reflow will inevitably cause redrawing, but redrawing does not necessarily cause reflow

Reflow and repaint

Reflow

concept:

When part or all of the render tree changes due to changes in the structure, size, layout, etc. of the elements, the browser re-renders part or all of the DOM.

Emphasize that the position and distance of element nodes have changed.

Actions that cause reflux:

• The browser window size changes
• Content changes
• Add or remove nodes
• Activate CSS pseudo-classes
• etc…

Redraw

concept:

When the style of a page element changes without affecting its position in the document flow, the browser simply assigns the new style to the element and repaints it.

Emphasize the style of element nodes, such as color, border solid line becomes dashed line (without changing position and distance).

Operations that cause redrawing:

• When the background-color property value changes
• When the border-color property value changes
• When the visibility attribute value changes
• etc…

The above is the detailed content of the principles and differences of reflow and repaint, which are frequently asked in Web interviews. For more information about reflow and repaint in Web interviews, please pay attention to other related articles on 123WORDPRESS.COM!