Composite is the third rendering stage, after layout and paint. It combines painted layers into the displayed image after the browser has calculated styles, positions, sizes, and pixels. section 16.3.1
The rendering pipeline separates three kinds of work:
- Layout calculates each element’s space and position, reflowing related content when geometry changes. section 16.3.1
- Paint fills pixels for text, images, borders, shadows, and backgrounds, storing portions of the page in layers. section 16.3.1
- Composite combines the painted layers into the final displayed image. section 16.3.1
Why the stages matter
Changing an element’s width, height, or position can require layout and reflow. Changing its background color requires repainting but not layout, because the color does not affect sizing or position. Both changes eventually contribute to the composited result. section 16.3.1
Figure 16.12 The three stages of the rendering pipeline
Use the rendering-pipeline diagram to compare layout, paint, and composite as successive stages. section 16.3.1
