Painting and Compositing are the last two steps to generate a frame in the browser’s pixel pipeline.
Painting is the process of creating a single or multiple layers (a.k.a compositor layers) for each part of the page, and filling the pixels data of each part into these layers. It is the most expensive operation in the pixel pipeline.
Compositing is the process of transforming and putting together the render layers to display on the screen.
By default, everything on the screen will be rendered as a single compositor layer.
If an element is subject to changes between frames (like moving around with
transform, or fading with
opacity,…) you can promote it into a new layer by setting the
will-change: transform or
transform: translateZ(0) property. So they can be rendered in a separate layer, moving them won’t affect other elements, because the transformation is done at composition time.
opacity will not trigger a reflow◹, you can skip the layout calculation. The pipeline will look like this:
But creating new layers is not free. For every layer, its data (like image texture) need to be uploaded to the GPU for rendering, it takes time, bandwidth, and memory to do so. You should avoid creating new layers unnecessary, or without any proper performance profiling.