- Takes the DOM and splits it up into layers
- #Paints each of these layers independently into software bitmaps
- Uploads them to the GPU as textures
- Composites the various layers together into the final screen image.
done by CPU - recalculating of the elements’ geometry
done by CPU - rendering of the image
color border-style visibility background text-decoration background-image background-position background-repeat outline-color outline outline-style border-radius outline-width box-shadow background-size
done by GPU
Changes to opacity can be handled by the GPU if the element the only one in the #Layer
- It’s a giant hack. You won’t find anything (at least for now) in the W3C‘s specifications about how compositing works, about how to explicitly put an element on a compositing layer or even about compositing itself. It’s just an optimization that the browser applies
Chrome paints the contents of a layer into a software bitmap before uploading it to the GPU as a texture. If that content doesn’t change in the future, it doesn’t need to be repainted.
We can move layers around, too, which makes them very useful for animation.
- 3D or perspective transform CSS properties
- <video> elements using accelerated video decoding
- <canvas> elements with a 3D (WebGL) context or accelerated 2D context
- Composited plugins (i.e. Flash, <iframe>)
- Elements with CSS animation for their opacity or using an animated transform
- Elements with accelerated CSS filters
- Element has a descendant that has a compositing layer (in other words if the element has a child element that’s in its own layer)
- Element has a sibling with a lower z-index which has a compositing layer (in other words the it’s rendered on top of a composited layer)
- position: fixed; will-change;