Skip to content
Painter
Deep dives

How a browser decides what to paint

Invalidation, not repainting. The interesting work is in deciding how little to redo.

A browser does not repaint the page when something changes. It marks a region as invalid, works out the smallest set of layers affected, and repaints only those.

Which is why one badly placed box-shadow on a scrolling element can cost more than a hundred elements changing colour: the shadow forces a larger invalid region than the element itself.

Turn on paint flashing

DevTools will highlight repainted regions in green. Ten seconds of scrolling with it on will tell you more than an hour of reading.

Leave a comment

Real questions get real answers. The editorial team reads every thread.