The rendering pipeline
Paint and rasterization
Understand how backgrounds, text, borders, shadows, and images become drawing instructions and pixels.
8 minute lesson
After layout knows geometry, paint records what should appear inside those boxes.
Text, backgrounds, borders, shadows, and images become drawing instructions. Their order matters because later content can cover earlier content.
Rasterization turns those instructions into pixels. Browsers often rasterize tiles and layers rather than one giant page bitmap.
Changing a background color usually keeps geometry but invalidates painted content. A large shadow or full-page background can make the paint area much larger than the changed element suggests.
In Chrome DevTools, enable paint flashing from the Rendering tools. Change a background color and watch the repainted region. Then record the same action and inspect Paint events.
Paint cost depends on area and visual complexity, not only JavaScript time. Reducing a handler from 2 ms to 1 ms will not help if it triggers an expensive full-page repaint.
Exercise: animate background-color, then animate transform. Compare paint flashing and the Performance recording.
Lesson completed