A paint layer is a separately rendered portion of a page created during the paint stage of the rendering pipeline. Painting fills pixels with text, images, borders, shadows, and backgrounds after layout has determined element positions and sizes. section 16.3.1
Use the rendering pipeline to reason about paint layers:
- Changing a background color usually requires repainting but not layout recalculation, because it does not change element size or position. section 16.3.1
- Under suitable conditions, an element can be promoted to its own layer and rendered separately, potentially using the GPU. section 16.3.1
- Additional layers may speed rendering but consume more memory; the browser later combines painted layers during compositing. section 16.3.1
Figure 16.12 The three stages of the rendering pipeline
Follow the pipeline from layout through painting and compositing to see where paint layers fit. section 16.3.1
