JavaScript Interview Question #157
What are reflow/layout and repaint?
Performance, Browser APIs, Rendering & Modern Web Architecture Senior Advanced
Quick Interview Answer
Layout, historically called reflow in many discussions, calculates the size and position of elements when geometry may have changed. Paint determines how visual parts such as text, borders, backgrounds, and shadows should be drawn.
Detailed Explanation
Layout, historically called reflow in many discussions, calculates the size and position of elements when geometry may have changed. Paint determines how visual parts such as text, borders, backgrounds, and shadows should be drawn.
Not every style change has the same cost. Changing dimensions may require layout and paint, while some transform and opacity changes can often be handled more efficiently by the compositor. Actual behavior depends on the browser and page.
Code Example
// May affect layout:
element.style.width = "400px";
// Often more animation-friendly:
element.style.transform =
"translateX(100px)";
element.style.opacity = "0.8";