What is reflow and what rendering stages of the browser do you know (layout, paint, composite)?

Reflow (or layout) is the process where the browser calculates the geometry of elements on the page: their sizes and positions. This occurs when the DOM or CSS changes in a way that affects the layout of elements.

The main stages of browser rendering:

1. Style Recalculation — calculating styles for elements.
2. Layout (Reflow) — calculating the sizes and positions of elements.
3. Paint — rendering pixels (colors, text, shadows, etc.) on layers.
4. Composite — combining layers into the final image displayed on the screen.

Reflow is the most performance-intensive stage, especially if it occurs frequently or affects many elements. Paint and Composite are usually faster but can also impact performance.

Example: changing the width of a block will trigger reflow, while changing the color will only cause repaint.