What a DOM or CSS change triggers

Every DOM or CSS change throws away some work the browser already did. Which stages run next depends on what became stale.

Now that we’ve seen every stage, let’s put the pieces together and learn to predict the cost of a change before making it.

Change text, width, or font size, and geometry is affected. The browser needs style calculation, layout, paint, and compositing. This is the expensive path.

Change a background color, and geometry stays the same. The browser skips layout and goes to paint, then compositing.

Change transform or opacity on an element that already has its own layer, and the browser can skip layout and paint both. Only compositing runs.

Watch out for cascading changes

Removing one class can be far more expensive than the one line suggests. If the class sits on a large container, or if descendants inherit from it, the browser recalculates styles and layout for the whole subtree. A class toggle on body is never a small change.

Treat all of this as predictions, not guarantees. Engines optimize invalidation in clever ways, and the structure of the surrounding page matters. The only way to know is to record.

An experiment

Make a page with three buttons:

resize.addEventListener('click', () => {
  box.style.width = '400px'
})

recolor.addEventListener('click', () => {
  box.style.backgroundColor = 'tomato'
})

slide.addEventListener('click', () => {
  box.style.transform = 'translateX(100px)'
})

Open the Performance panel, start recording, click one button, stop. Repeat for each button, one recording at a time. Turn on Paint flashing from the Rendering tab as a second source of evidence.

For every click, write down:

• which stages you predicted
• which events DevTools recorded
• which part of the page was affected

You’ll see Layout only for the first button. You’ll see Paint for the first two. With the third, if the box got its own layer, the Main track shows almost nothing after the click.

This habit, connecting a source change to the browser work it caused, is where performance work starts. Rules of thumb get you a prediction. The recording tells you if you were right.