Hardware Acceleration
How browsers offload rendering to the GPU for 60fps animations, and the danger of Layer Explosion.
What it is
Hardware Acceleration is the process of offloading specific graphics rendering and compositing tasks from the Central Processing Unit (CPU) to the Graphics Processing Unit (GPU) to maximize rendering speed and efficiency.
By doing this, the browser can bypass the expensive Layout and Paint phases entirely for certain animations.
Why it matters
The CPU is often bogged down by JavaScript execution, DOM manipulation, and layout calculations.
By offloading visual updates to the GPU-which is highly optimized for parallel processing and pixel manipulation-web developers can achieve buttery-smooth, consistent 60 frames per second (fps) animations without blocking the main thread.
How it works
During the rendering pipeline, when certain CSS properties (like 3D transforms, opacity, or will-change) are applied, the browser promotes those elements into their own dedicated 'composite layers'.
These layers are uploaded to the GPU as textures. Instead of the CPU repainting the entire screen for every frame, the GPU simply composites (moves, scales, or blends) these existing textures together, which is incredibly fast.
Try it
Explore the Layer Cake Renderer. See how adding a GPU layer makes animation buttery smooth, but adding too many layers causes an out-of-memory crash!
CPU Render: The ball is painted directly onto the single document layer. The CPU handles layout, paint, and JS execution all at once. If the CPU gets busy, frames drop, causing the animation to stutter (jank).
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
- GPU compositing skips Layout and Paint for 60fps animations.
- Only transform and opacity can be fully offloaded to the GPU safely.
- Do not put every element on its own layer. Layer Explosion crashes mobile devices.
Done with this concept?
Mark it complete to track your progress. No login needed.