Paint

Paint aka rasterization is the step where the browser fills in the actual pixels for every element in the layout tree, translating boxes and their computed styles (colors, borders, shadows, text) into a picture that can be shown on the screen.

Paint records

Instead of drawing pixels straight away, the browser first creates a paint record, a list of draw calls like "draw a rectangle here" or "draw this text there" in the order elements should appear.

This list is often called a display list and it describes what to draw without yet deciding how to get it onto the screen efficiently.

Paint order

Elements aren't necessarily painted in the order they appear in the HTML. The browser follows a stacking order based on things like position, z-index and opacity so that overlapping elements are drawn correctly, back to front.

Rasterization

Rasterization is the process of converting the paint records into actual pixels in a bitmap. Modern browsers often break the page into tiles and rasterize the ones near the viewport first so the user sees content as fast as possible.

This work can happen on the CPU or be handed off to the GPU, which is much faster at filling in large areas of pixels.

Repaint vs reflow

A repaint happens when a style changes in a way that affects appearance but not geometry, like background-color or visibility. It's cheaper than a reflow because the browser can skip layout entirely and jump straight to painting.

Paint takes the layout tree and turns it into pixels, but those pixels still need to be assembled into the final image you see on screen, that's where compositing comes in.

#rendering-engine #browsers #css