CSS Hardware Acceleration Notes

gistfile1.md

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

GPUs get payloads sent by the CPU of layer images, with size and shader information.

Implicit compositing is when a non animated element if over an animated element and the whole thing has to be implicitily compositied.

An element will be promoted to a compositing layer for a variety of reasons, such as:

• 3d transforms
• has transform property
• <video> or <iframe> or <canvas> element
• will-change property
• and more

Big problem with compositing is memory consumption -- browser has to paint the screen RGBa pixel by RBGa pixel, and this takes alot of memory. Each compositing layer is a piece of the screen that has to be painted pixel by pixel. This can be an issue on mobile browsers.

Tips:

• avoid implicit compositing
• Animate transform and opacity properties only
• Recuce the size of the composite layer (if possible) by shrinking down images and using transform: scale

CSS transitions and animations are better than javascript animations because they can take advantage of GPU. JS animations have to calculate the position of all elements every requestAnimationFrame

Source: https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/