will-change och lagerfrämjande

will-change signalerar till webbläsaren att ett element kommer att animeras, så att den kan förbereda optimeringar i förväg — till exempel genom att flytta elementet till ett eget GPU-kompositlager innan animeringen startar.

Ange vilken egenskap som kommer att ändras: will-change: transform, will-change: opacity, will-change: transform, opacity. Använd will-change: auto för att ta bort signalerna när animeringen är klar.

Använd will-change endast på element som faktiskt kommer att animeras och endast under den tid animeringen pågår. Att lägga till och ta bort det med JavaScript (via en klass) är effektivare än att låta det vara permanent aktiverat på statiska element.

Varje befordrat lager förbrukar GPU-minne. Om många element befordras samtidigt uppstår minnestryck, vilket kan försämra prestandan — särskilt på mobila enheter med begränsat GPU-minne. Befordra lager sparsamt och medvetet.

Använd aldrig will-change på * eller på stora mängder element. Kostnaden för optimeringen överstiger nyttan när för många lager skapas. Profilera först och lägg bara till will-change där ett specifikt problem med hackig rendering har bekräftats.

Innan will-change använde utvecklare transform: translateZ(0) eller translate3d(0,0,0) för att tvinga fram GPU-befordran. will-change är det korrekta och semantiska tillvägagångssättet. translateZ-hacket fungerar fortfarande, men är en implementeringsdetalj och uttrycker inte avsikten.

Befordrade lager skapar nya staplingskontexter. Det påverkar z-index-beteendet — underordnade element i ett befordrat element staplas i förhållande till det elementet, inte dokumentroten. Var medveten om förändringar i staplingskontexten när element befordras.

Lägg till will-change vid mouseenter eller när en animering startar, och ta bort det vid mouseleave eller när animeringen slutar. Då får webbläsaren tid att förbereda sig utan att permanent förbruka GPU-minne för inaktiva element.

Chrome DevTools → Layers-panelen visualiserar befordrade lager. Ett stort antal lager (hundratals) tyder på överdriven lagerbefordran. I avsnittet Memory visas GPU-minnesanvändningen. Håll antalet befordrade lager så lågt som möjligt och övervaka det med profiler för enklare enheter.

CSS contain: layout paint begränsar layout- och målningsberäkningar till ett delträd, ungefär som isolering. Det förbättrar prestandan för självständiga komponenter utan att skapa GPU-lager — en mindre kostsam optimering än will-change för icke-animerade element.

will-change stöds fullt ut i alla moderna webbläsare. Webbläsare behandlar det som en signal, inte som en befallning — de kan ignorera det om resurserna är begränsade. Förlita er inte på det som en garanti; använd det endast som vägledning för prestandaoptimering.

will-change flyttar element till GPU-kompositlager innan animeringar startar, vilket eliminerar kostnaden för lagerbefordran när animeringen börjar. Använd det dynamiskt och sparsamt — endast där profilering visar hackig rendering — för att undvika överdriven GPU-minnesanvändning på grund av för många befordrade lager.