GPU Acceleration
ELI5 — The Vibe Check
GPU acceleration is when the browser offloads rendering work to your graphics card instead of making the CPU do everything. It's like hiring a specialized contractor instead of making the general handyman do plumbing, electrical, AND painting. Things get done faster.
Real Talk
GPU acceleration leverages the graphics processing unit for rendering operations like transforms, opacity changes, and compositing. Browsers promote elements to GPU-backed layers when they use properties like transform or opacity. This enables 60fps animations but increases memory usage.
When You'll Hear This
"Force GPU acceleration with transform: translateZ(0) — the old hack still works" / "Our scroll animation is janky because it's not GPU-accelerated"
Related Terms
Compositing
Compositing is the final step where the browser assembles all the painted layers into the image you see on screen, like stacking transparent sheets in a pr...
CSS Transform
CSS Transform lets you rotate, scale, skew, and move elements without messing up the page layout.
Will-Change
Will-change is like telling the browser 'heads up, I'm about to animate this thing.' The browser pre-allocates resources so the animation is smooth.