Paint and rasterization

After layout, the browser knows where every box is and how big it is. Paint decides what goes inside those boxes.

Paint doesn’t produce pixels yet. It produces a list of drawing instructions: fill this rectangle with white, draw this text in this font, stroke this border, place this image here. The order of the list matters, because later instructions cover earlier ones. That’s how z-index and stacking contexts end up on screen.

Rasterization then executes those instructions and produces actual pixels. Browsers rarely rasterize one giant bitmap for the whole page. They split the content into tiles and layers, so they can rasterize only what changed and only what’s near the viewport.

What invalidates paint

Change a background-color and the geometry stays the same. Layout is skipped. But the painted content is stale, so paint runs again for that area.

The area is the key word. A large box-shadow, a full-page background, or a semi-transparent overlay can make the repainted region much bigger than the element you changed. A tiny button with a shadow that spans the whole header repaints the whole header.

Watch repaints happen

Chrome DevTools has a Paint flashing option. Open the Command Menu with Cmd+Shift+P, type “Rendering”, and open the Rendering tab. Check Paint flashing.

Now every region that gets repainted flashes green. Hover a button, type in a field, change a background in the Styles pane. You’ll see exactly how much of the screen the browser redraws each time. Often it’s more than you expect.

Then record the same action in the Performance panel and look for Paint events. Click one to see the size of the painted area.

Paint cost is about area, not JavaScript

Paint time depends on how much area you repaint and how complex it is: gradients, shadows, blur filters, lots of text. It has nothing to do with how fast your JavaScript runs.

Reducing a handler from 2 ms to 1 ms won’t help if the handler triggers a full-page repaint that costs 20 ms.

Try this on your own project: animate a background-color, then animate a transform. Watch paint flashing for both and compare the Performance recordings. The first flashes on every frame. The second, after the first frame, doesn’t.