Frontend System Design
/Expert
Layout (Reflow)
Definition
Layout (also called Reflow) is the process where the browser calculates the exact geometric position and size of every node in the Render Tree based on the viewport size.
Explain Like I'm New
Layout is the browser doing the math to figure out exactly how many pixels wide and tall every box should be, and exactly what X/Y coordinates they sit at.
Terminal Output
bash / terminal
WARNING: Triggering Layout/Reflow is EXPENSIVE!
Avoid querying properties like:
- element.offsetWidth
- element.scrollTop
- window.getComputedStyle()
...inside loops, as it forces Synchronous Layout Thrashing.
Interview Questions
basic
- Can you explain the basic concept of Layout and Reflow?
- Why is Layout and Reflow important in frontend system design?
intermediate
- How does Layout and Reflow impact perceived performance and user experience?
- Describe a scenario where you had to debug an issue related to Layout and Reflow.
advanced
- In a highly scaled enterprise system, how do you optimize Layout and Reflow?
- What are the security implications of Layout and Reflow?
trick
- Can Layout and Reflow be entirely bypassed or disabled? What happens if it is?