The Paint Phase
How the browser fills in the pixels for every node, converting geometry into colors and images.
What it is
The Paint Phase is where the browser finally decides what pixels to draw to the screen.
During Layout, the browser calculated the size and position of boxes. During Paint, it fills those boxes with colors, gradients, text, shadows, and images.
Why it matters
Painting is the second most expensive operation after Layout. If you change a property like color, background, or box-shadow via JavaScript or CSS hover states, the browser has to re-paint the affected area.
While a Repaint is cheaper than a Layout Reflow (because it doesn't move other elements around), painting massive, complex layers-especially with large images or heavy drop-shadows-can still cause performance drops on low-end devices.
How it works
The browser takes the geometric boxes from the Layout phase and creates a 'Paint Record'.
This record is a list of sequential drawing instructions. It draws the background color first, then the background image, then the borders, then the text, and finally the outlines.
The browser usually divides the page into 'tiles' and paints them sequentially, which is why on very slow connections or heavy pages you might see checkerboard patterns as scrolling forces new tiles to paint.
Try it
Watch the 'Paint Record' execute sequentially. The browser doesn't draw everything at once; it builds up the pixels layer by layer.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
- Paint fills in the visual details (colors, images, text) inside the geometry calculated by Layout.
- Repainting is cheaper than Layout, but still expensive compared to Compositing.
- Complex shadows and large images increase paint time.
Done with this concept?
Mark it complete to track your progress. No login needed.