Prestanda: transformerbara egenskaper kontra ommålning

Webbläsare renderar i tre steg: Layout (storlek + position) → Paint (pixlar) → Composite (sammanslagning av GPU-lager). Det är kostsamt att animera egenskaper som utlöser tidigare steg.

Om dessa egenskaper ändras måste webbläsaren beräkna om layouten för potentiellt hela sidan. Undvik att animera dem:

• width, height
• margin, padding
• top, left
• font-size
• display

Dessa hoppar över layouten men målar om pixlarna. De är måttligt kostsamma:

• background-color
• color
• box-shadow
• border

Dessa hoppar över både layout och målning – webbläsaren behöver bara kompositera förhandsrasteriserade lager. De är mycket billiga och GPU-accelererade:

• transform
• opacity

För mjuka animationer i 60 fps ska ni endast animera transform och opacity. Använd transform: translate() i stället för top/left, och opacity i stället för toningar med display.

will-change talar om för webbläsaren att flytta ett element till ett eget GPU-lager innan animationen startar, så att en plötslig lagerflyttning mitt i animationen förhindras.

Ange will-change: auto eller ta bort egenskapen helt när animationerna är klara. Om för många element ligger i egna lager slösas GPU-minne.

Använd fliken Performance i Chrome DevTools för att spela in och granska bildrutornas tidsåtgång. På fliken Rendering kan ni aktivera visning av ommålningar (grönt överlägg) för att se vilka element som målas om i varje bildruta.

Den mest effektiva optimeringen är att ersätta positionsanimationer med transform:

Övergångar för bakgrundsfärger utlöser ommålning men inte layout. De är acceptabla för små element. För stora bakgrunder kan ni i stället använda ett pseudo-element med en övergång för opacity:

Egenskapen contain talar om för webbläsaren att ett element och dess underträd är fristående. Det begränsar omfånget för ogiltigförklarad layout och förbättrar prestandan vid ommålning.

Om ni animerar layoutegenskaper (width, top, margin) utlöses kostsamma omberäkningar. Målingsegenskaper (color, background) är billigare. Endast transform och opacity animeras i GPU:ns kompositionssteg utan att utlösa layout eller målning. Föredra alltid dessa för mjuka animationer med god prestanda.