What Does will-change In CSS Do?

Summary

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. 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: 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.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.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. What can will-change trigger? The will-change hint tells the browser that it might want to give this element its own GPU layer. If the browser agrees, the element is promoted to a separate texture, so any future changes won't force its siblings to repaint. However, the browser makes the final call, if the gain is small or memory is tight, it can ignore the hint. The browser may also pre-allocate memory for the expected changes, optimize the rendering path and prepare GPU resources. How does it work in practice? Without the hint, the browser promotes the element to is own layer only when the animation starts. That one-time layer ...