Layout

Layout aka reflow is a step where the browser calculations the position and size of each element in the document considering the styles, dimensions and relationship between each element.

Dirty bit system

• It's a fundamental optimization technique used in modern web browsers to provide smoother user experiences by selectively recalculating layout only for elements that have changed.

• The dirty bit system helps minimize the number of reflows and improves rendering performance.

• Only elements with their dirty bit set to true are subjected to layout calculations. Once an element's layout has been recalculated, its dirty bit is reset

Layout approaches

Global layout

• The entire document layout is recalculated from scratch whenever a change occurs that affects layout.

• This involves traversing the entire document tree and performing layout calculations for each element.

• Global layout can be performance intensive but it ensures that the entire document layout is consistent and up-to-date after every change.

Incremental layout

• Incremental layout involves selectively updating layout calculations only for the parts of the document that have been affected by changes.

• The rendering engine identifies the affected elements and updates their layout as necessary.

• Incremental layout is particularly useful for handling dynamic content, animations, and interactions.

• It is preferred where the changes are localized and don't require a full document layout recalculation.

Reflow is when a rendering engine updates elements' positions and sizes due to DOM or CSS changes and It ensures elements display correctly.