Compositing: how a browser combines layers created in the CPU and the GPU
- In normal situations, browser will do the initial paint with CPU, then it will send it to GPU for display
- When there is an animation, each frame is recaluclated by the CPU and sent to the GPU for rendering. Only the part of the page that is animated is redrawn
- GPU composing is when the GPU draws two layers in the animation and offsets them from another, compositing the two layers.
In order for a CSS property in a web animation to take advantage of compositing:
- It must not depend on or affect the document's flow
- It must not cause a repaint
For example, use transform
over left
when animating properties, since transform
meets the conditions above