Rendering pipeline investigation

Briefing

Why is animating transform cheap while animating top is expensive, when both move the element by the same number of pixels?

Change one property. Watch exactly which stages of the pipeline are invalidated, and which are not.

Laboratory

Browser Lab

Level

RESEARCHER

Estimated time

11 minutes

Method

simulation

Variables under observation

stylelayoutpaintcompositinginvalidationframe budget