The Layout Phase (Reflow)
How the browser calculates the exact size and position of every node in the Render Tree.
What it is
The Layout Phase (also called Reflow) is the step where the browser calculates the precise geometry of the page.
The Render Tree tells the browser *what* to draw, but Layout determines exactly *where* to draw it and *how big* it should be.
Why it matters
Layout is computationally expensive. If you change a layout-triggering property (like width, height, margin, or left) in an animation, the browser has to recalculate the geometry for the entire node tree 60 times a second.
This is a massive source of jank and poor performance in web apps. Understanding Layout allows you to animate properties that skip this phase entirely (like transform and opacity).
How it works
The browser starts at the root of the Render Tree and traverses downwards.
It determines the size of the viewport and uses the Box Model to calculate the exact width, height, padding, margins, and border of every element in pixels.
Because elements can affect each other (e.g., a child expanding pushes its sibling down), changing the size of a single element high up in the DOM can cause a 'Layout Thrash'-forcing the browser to recalculate the geometry of hundreds of children and siblings.
Try it
Observe how animating width causes the browser to constantly recalculate the surrounding layout, while animating transform leaves the layout alone.
Animating width shrinks the element's actual geometry. This drags the Dependent Sibling to the left, forcing a global layout recalculation on every frame.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
- Layout determines size and position (geometry) in pixels.
- Layout is highly expensive and often cascades to siblings and children.
- Layout Thrashing occurs when JS forces synchronous layout calculations by reading geometry right after writing styles.
Done with this concept?
Mark it complete to track your progress. No login needed.