Performance: Transformierbare vs. neu zu rendernde Eigenschaften

Browser rendern in drei Phasen: Layout (Größe + Position) → Paint (Pixel) → Composite (Zusammenführen von GPU-Ebenen). Das Animieren von Eigenschaften, die frühere Phasen auslösen, ist aufwendig.

Das Ändern dieser Eigenschaften zwingt den Browser, das Layout möglicherweise für die gesamte Seite neu zu berechnen. Vermeiden Sie es, sie zu animieren:

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

Diese Eigenschaften überspringen das Layout, zeichnen die Pixel aber neu. Sie sind mäßig aufwendig:

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

Diese Eigenschaften überspringen sowohl Layout als auch Paint — der Browser muss nur bereits gerasterte Ebenen zusammenführen. Sie sind sehr günstig und GPU-beschleunigt:

• transform
• opacity

Für flüssige Animationen mit 60 fps sollten Sie nur transform und opacity animieren. Verwenden Sie transform: translate() statt top/left und opacity statt Überblendungen mit display.

will-change weist den Browser an, ein Element vor dem Start der Animation in eine eigene GPU-Ebene zu verschieben. Dadurch wird ein „Promotion-Flash“ während der Animation verhindert.

Setzen Sie will-change: auto oder entfernen Sie die Eigenschaft vollständig, sobald die Animationen beendet sind. Wenn zu viele Elemente in GPU-Ebenen verschoben bleiben, wird GPU-Speicher verschwendet.

Verwenden Sie in Chrome DevTools den Tab Performance, um das Timing der Frames aufzuzeichnen und zu untersuchen. Im Tab Rendering können Sie das Aufblitzen neu gezeichneter Bereiche aktivieren (grüne Überlagerung). Dadurch sehen Sie, welche Elemente in jedem Frame neu gezeichnet werden.

Die wirkungsvollste Optimierung besteht darin, Positionsanimationen durch transform zu ersetzen:

Transitionen der Hintergrundfarbe lösen ein Neuzeichnen aus, aber kein neues Layout. Für kleine Elemente sind sie akzeptabel. Bei großen Hintergründen sollten Sie stattdessen ein Pseudo-Element mit einer opacity-Transition verwenden:

Die Eigenschaft contain weist den Browser darauf hin, dass ein Element und sein Teilbaum unabhängig sind. Dadurch wird der Umfang der Layout-Invalidierung begrenzt und die Performance beim Neuzeichnen verbessert.

Das Animieren von Layout-Eigenschaften (width, top, margin) löst aufwendige Neuberechnungen aus. Paint-Eigenschaften (color, background) sind günstiger. Nur transform und opacity werden in der GPU-Composite-Phase animiert, ohne Layout oder Paint auszulösen. Bevorzugen Sie für flüssige und performante Animationen immer diese Eigenschaften.