will-change und Layer-Promotion

will-change weist den Browser darauf hin, dass ein Element animiert wird. Dadurch kann er Optimierungen im Voraus vorbereiten, beispielsweise das Element vor Beginn der Animation auf eine eigene GPU-Compositor-Ebene zu verschieben.

Geben Sie an, welche Eigenschaft geändert wird: will-change: transform, will-change: opacity, will-change: transform, opacity. Verwenden Sie will-change: auto, um die Hinweise nach dem Ende der Animation zu entfernen.

Wenden Sie will-change nur auf Elemente an, die tatsächlich animiert werden, und nur für die Dauer der Animation. Es mit JavaScript (über eine Klasse) hinzuzufügen und zu entfernen, ist effizienter, als es dauerhaft auf statischen Elementen zu belassen.

Jede auf eine eigene Ebene verschobene Ebene beansprucht GPU-Speicher. Wenn viele Elemente gleichzeitig auf eigene Ebenen verschoben werden, entsteht Speicherdruck, der die Leistung beeinträchtigen kann – insbesondere auf Mobilgeräten mit begrenztem GPU-RAM. Führen Sie Layer-Promotion sparsam und gezielt durch.

Wenden Sie will-change niemals auf * oder auf eine große Anzahl von Elementen an. Wenn zu viele Ebenen erstellt werden, übersteigen die Kosten der Optimierung ihren Nutzen. Erstellen Sie zuerst ein Profil und fügen Sie will-change nur dort hinzu, wo ein konkretes Ruckelproblem bestätigt wurde.

Vor will-change verwendeten Entwickler transform: translateZ(0) oder translate3d(0,0,0), um eine GPU-Promotion zu erzwingen. will-change ist der korrekte semantische Ansatz. Der translateZ-Trick funktioniert weiterhin, ist jedoch ein Implementierungsdetail und bringt nicht die eigentliche Absicht zum Ausdruck.

Auf eigene Ebenen verschobene Elemente erzeugen neue Stacking Contexts. Dies beeinflusst das Verhalten von z-index: Die untergeordneten Elemente eines auf eine eigene Ebene verschobenen Elements werden relativ zu diesem Element gestapelt, nicht relativ zur Dokumentwurzel. Berücksichtigen Sie diese Änderungen des Stacking Contexts, wenn Sie Elemente auf eigene Ebenen verschieben.

Fügen Sie will-change bei mouseenter oder zu Beginn einer Animation hinzu und entfernen Sie es bei mouseleave oder am Ende der Animation. So hat der Browser Zeit zur Vorbereitung, ohne dauerhaft GPU-Speicher für inaktive Elemente zu belegen.

Das Layers-Panel der Chrome DevTools visualisiert Ebenen, die auf eigene Ebenen verschoben wurden. Eine hohe Ebenenanzahl (Hunderte) weist auf eine übermäßige Layer-Promotion hin. Der Abschnitt Memory zeigt die GPU-Speichernutzung. Halten Sie die Anzahl der Ebenen auf ein Minimum und überwachen Sie sie anhand von Profilen leistungsschwacher Geräte.

CSS contain: layout paint beschränkt Layout- und Paint-Berechnungen auf einen Teilbaum, ähnlich wie eine Isolation. Dies verbessert die Leistung eigenständiger Widgets, ohne GPU-Ebenen zu erstellen – für nicht animierte Elemente eine kostengünstigere Optimierung als will-change.

will-change wird von allen modernen Browsern vollständig unterstützt. Browser behandeln es als Hinweis, nicht als Befehl, und können es bei knappen Ressourcen ignorieren. Verlassen Sie sich daher nicht darauf als Garantie, sondern verwenden Sie es ausschließlich als Hinweis zur Leistungsoptimierung.

Welches ist das wichtigste Risiko, wenn will-change gleichzeitig auf viele Elemente angewendet wird?

will-change verschiebt Elemente bereits vor Animationen auf GPU-Compositor-Ebenen und beseitigt dadurch die Kosten der Promotion zu Animationsbeginn. Wenden Sie es dynamisch und sparsam an – nur dort, wo ein Profil Ruckeln zeigt –, um einen übermäßigen GPU-Speicherverbrauch durch zu viele Ebenen zu vermeiden.