Interview lessons: browser rendering mechanics and redraw and reflow

Browser rendering mechanism

• Flow layout
• Parsing HTML to DOM, parsing CSS to CSSOM, dom and CSSOM combined to produce the render tree
• According to the render tree and node style, calculate their position and size, and finally draw the node on the page

redraw

Redraw a node whose geometry or style changes without affecting the layout.

backflow

When a layout or geometry property needs to change, it is called backflow, and backflow is a key factor affecting browser performance because the change involves updating the layout of part of the page (or the entire page).