Browsers: Browser rendering mechanisms/backflow and redraw

Browser rendering mechanism

The browser adopts Flow Based Layout

Browsers parse HTML to DOM and CSS to CSSOM. DOM and CSSOM are combined to produce a Render Tree.

With RenderTree, we know the style of all the nodes, calculate their size and position on the page, and finally draw the nodes on the page.

Because browsers use streaming layouts, calculations of Render Tree are usually done once, except for tables and their internal elements, which can be evaluated multiple times and usually take three times as long as equivalent elements, which is one of the reasons to avoid table layouts.

Refluxing and repainting

What is backflow: When part (or all) of the Render Tree needs to be rebuilt due to changes in element size, layout, hiding, etc. This is called reflow. Each page needs to backflow at least once, even when the page is first loaded, which is bound to happen because the Render Tree is being built. On backflow, the browser invalidates the affected portion of the render tree and reconstructs that portion of the render tree. When backflow is complete, the browser redraws the affected portion of the render tree onto the screen, a process called redraw.

What is redraw: When some elements in the Render Tree need to be updated with attributes that only affect the appearance and style of the elements, not the layout, such as background-color. It’s called redrawing.

Difference: Backflow must cause repainting, and repainting does not necessarily cause backflow. For example, only color changes can redraw without causing backflow. Backflow is required when page layout and geometry changes, such as adding or removing visible DOM elements, element positions change, element dimensions change – margins, padding, borders, width, and height – and content changes