Browser compositing layers
Slap yourself if
You think layers are just GPU acceleration or believe adding will-change is a free performance win.
Why this exists
Because many performance regressions come from misunderstanding when layers help, when they hurt, and how compositing quietly dominates frame time.
Mental model
Compositing layers are a trade between isolation and overhead. They reduce repaint cost by increasing memory use, coordination, and compositing work.
- The browser decides which elements become separate compositing layers.
- Each layer is painted independently into its own backing store.
- Layers are uploaded to the GPU and composited every frame.
- Too many layers increase memory pressure and compositing cost.
- Forcing layers with will-change without measuring impact.
- Assuming transforms always improve performance.
- Creating excessive layers in scrolling or animated UIs.
- Confusing paint optimization with layout optimization.
Compositing layers isolate paint work but introduce GPU memory and compositing overhead, so they must be used selectively based on rendering bottlenecks.
- Says layers always improve performance.
- Equates layers with repaint avoidance only.
- Ignores GPU memory constraints.
- Cannot explain layer promotion.
Deep dive
Requires Pro
Premium deep dives include more internals, more scars.