The CPU can draw pixels, but it’s slow for animations, scrolling, and complex visual effects. Without GPU acceleration, web pages would feel sluggish and janky.
GPU rendering uses the Graphics Processing Unit (GPU) to accelerate painting and compositing. GPUs are designed for parallel pixel operations, making scrolling and animations smooth (60+ FPS).
- CPU paints: Initial painting may happen on CPU
- Layers to GPU: Painted layers uploaded to GPU memory
- GPU composites: GPU combines layers, applies transforms/opacity
- Result: Smooth animations without CPU involvement
GPU excels at:
- Transforming layers (translate, scale, rotate)
- Adjusting opacity
- Compositing multiple layers
- Parallel processing: GPU has thousands of small cores
- Off-main-thread: doesn’t block JavaScript
- Used for: transforms, opacity, scrolling, video
- Layers must be uploaded to GPU memory (costly first time)
- Built from: Compositing — GPU does the compositing
- Related: Painting — CPU may do initial paint
- Related: Browser Rendering — GPU rendering is step 6
- Contrasts with: CPU Rendering — GPU is faster for graphics
- Uploading layers to GPU has initial cost
- GPU memory is limited—too many layers cause issues
- Not all CSS properties are GPU-accelerated
transformandopacityare the best for animations