Different changes cost different work
Changing text or dimensions can affect layout around an element. Changing only a color usually needs paint but not new geometry. Transform and opacity changes can often be composed efficiently on their own layer.
Stable space prevents visible jumps
Images, ads, and async content should reserve the space they will occupy. Repeatedly reading layout and writing styles inside one loop can also force the browser to stop and recalculate more often than needed.
A familiar example
Loading a hero image
- The image element declares its intrinsic width and height.
- The layout reserves the correct aspect ratio before the file arrives.
- When the image loads, nearby text stays in place instead of jumping downward.
What to remember
- Layout changes can affect surrounding elements.
- Reserve space for content that loads later.
- Measure real behavior before attempting tiny rendering optimizations.