The rendering pipeline
What a DOM or CSS change triggers
Predict whether a change needs style calculation, layout, paint, compositing, or several stages.
8 minute lesson
A DOM or CSS change invalidates work the browser previously completed. The next required stage depends on what became stale.
Changing text, width, or font metrics can affect geometry. The browser may need style calculation, layout, paint, and compositing.
Changing a background normally preserves geometry but needs paint. Moving a suitable existing layer with transform can often skip layout and repainting.
Removing a class can be more expensive than the changed line suggests if it changes descendants or a large layout container.
Treat these as predictions, not guarantees. Browser engines optimize invalidation, and surrounding page structure matters.
Make three buttons that change width, background-color, and transform. Record one click at a time in the Performance panel. Use paint flashing as a second source of evidence.
For every change, write down:
- which stages you predicted
- which events DevTools recorded
- which part of the page was affected
Performance work starts by connecting a source change to measured browser work.
Lesson completed