Reading Notes / Browser Rendering: Painting and Compositing
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.
This explains why doing animation in CSS can result in a better performance than doing them in JavaScript. Since transform and 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.
References
- https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count◹
- https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas◹