What Does will-change In CSS Actually Do?
I've been using the will-change CSS property for a while now, but I realized I never understood exactly what it does. I knew it was some sort of performance optimization but that's pretty much it.
will-change
What is will-change?
It's a hint to the browser, something along the lines of “hey, I’m about to animate these properties, please get ready.”
Browsers may respond by promoting the element to its own GPU compositing layer, pre‑allocating memory, or do nothing at all if they decide the hint isn’t worth it.
Why does the heads-up matter?
The way browsers draw anything on screen generally follows these 3 steps:
Layout The browser figures out how big every box is and where it sits. Imagine laying out pieces on a board game. This step is mostly CPU work. Paint Now the boxes get filled with pixels, colors, borders, shadows and images. Think of someone coloring in the board game pieces. This also uses the CPU and some extra memory to store the painted bits. Compose Finally, the painted layers are handed to the GPU, which stacks them together and shows the combined frame on screen like sliding finished drawings under a sheet of glass. This step is GPU heavy.
If an animation touches only compositor friendly properties like transform and opacity , the browser can skip layout and paint and let the GPU handle everything in the compositing step.
... continue reading