HTML & CSS
/Advanced
Reflow
Definition
Also known as Layout. It is the process where the browser calculates the exact position and size of every object in the Render Tree based on the CSS Box Model and viewport size.
Explain Like I'm New
Math time. The browser has the Render Tree. Now it has to figure out exactly how many pixels wide every single box is. If you use JavaScript to change the width of the main container from 500px to 600px, the browser has to recalculate the width of every single child inside it. This massive recalculation is called a Reflow.
Real World Example
Animating a sidebar opening by changing its `width` from `0` to `300px` using JavaScript. Every single frame of that animation forces the browser to recalculate the entire page layout. This destroys your framerate and makes the site laggy.
Common Use Cases
- •Performance tuning JS animations
Terminal Output
bash / terminal
// --- JAVASCRIPT EXAMPLES THAT TRIGGER EXPENSIVE REFLOWS ---
// const element = document.getElementById('myBox');
// 1. Changing physical dimensions
// element.style.width = '200px';
// element.style.height = '100px';
// 2. Changing margins or padding
// element.style.padding = '20px';
// 3. Changing font sizes (pushes text around)
// element.style.fontSize = '2rem';
// 4. Asking the browser for coordinates forces it to calculate them!
// const topPosition = element.offsetTop;
// const height = element.clientHeight;
console.log("Avoid triggering Reflows inside rapid loops (like scroll event listeners) at all costs.");
Interview Questions
basic
- Does resizing your browser window trigger a Reflow?
intermediate
- Why is animating the `width` property bad for performance?