Animationen und Leistung

Animationen müssen gut funktionieren, da sie sonst die User Experience negativ beeinflussen.

Behalten Sie bei jeder Animation 60 fps bei, da weniger Ruckeln oder Stolpersteine entstehen, die sich für Ihre Nutzer bemerkbar machen und sich negativ auf die Nutzererfahrung auswirken.

  • Achten Sie darauf, dass Ihre Animationen keine Leistungsprobleme verursachen. Informieren Sie sich daher über die Auswirkungen der Animation einer bestimmten CSS-Eigenschaft.
  • Besonders teuer sind Animationseigenschaften, die die Geometrie der Seite (das Layout) ändern oder zum Malen führen.
  • Ändern Sie nach Möglichkeit die Transformationen und die Deckkraft.
  • Verwende will-change, damit der Browser weiß, was animiert werden soll.

Das Animieren von Eigenschaften ist nicht kostenlos und einige Eigenschaften sind kostengünstiger als andere. Wenn Sie beispielsweise width und height eines Elements animieren, ändert sich seine Geometrie, was dazu führen kann, dass andere Elemente auf der Seite verschoben oder ihre Größe geändert werden. Dieser Vorgang wird Layout (oder Reflow in Gecko-basierten Browsern wie Firefox) genannt und kann teuer werden, wenn Ihre Seite viele Elemente enthält. Wenn ein Layout ausgelöst wird, muss normalerweise die Seite oder ein Teil davon gerendert werden, was in der Regel sogar noch teurer ist als der Layoutvorgang selbst.

Vermeiden Sie es, Eigenschaften zu animieren, die Layout oder Paint auslösen. In den meisten modernen Browsern bedeutet dies, dass Animationen auf opacity oder transform beschränkt werden. Beides kann vom Browser stark optimiert werden. Es spielt keine Rolle, ob die Animation von JavaScript oder CSS verarbeitet wird.

Vollständigen Leitfaden zum Erstellen von Animationen mit hoher Leistung lesen

Attribut will-change verwenden

Unterstützte Browser

  • 36
  • 79
  • 36
  • 9,1

Quelle

Verwenden Sie will-change, damit der Browser weiß, dass Sie die Eigenschaft eines Elements ändern möchten. So kann der Browser schon vor der Änderung die am besten geeigneten Optimierungen vornehmen. Verwenden Sie will-change jedoch nicht zu häufig, da der Browser dadurch Ressourcen vergeudet und somit noch mehr Leistungsprobleme verursacht.

Als Faustregel gilt: Wenn die Animation in den nächsten 200 ms ausgelöst wird, entweder durch die Interaktion eines Nutzers oder durch den Status Ihrer App, ist die Verwendung von will-change für animierte Elemente eine gute Idee. In den meisten Fällen sollte für jedes Element in der aktuellen Ansicht der App, das Sie animieren möchten, will-change für die Properties aktiviert sein, die Sie ändern möchten. Im Fall des Box-Beispiels, das wir in den vorherigen Leitfäden verwendet haben, sieht das Hinzufügen von will-change für Transformationen und die Deckkraft so aus:

.box {
  will-change: transform, opacity;
}

Die Browser, die dies unterstützen – die derzeit die meisten modernen Browser – nehmen intern die entsprechenden Optimierungen vor, um das Ändern oder Animieren dieser Eigenschaften zu unterstützen.

CSS- und JavaScript-Leistung im Vergleich

Es gibt viele Seiten und Kommentar-Threads im Web, auf denen die relativen Vorzüge von CSS- und JavaScript-Animationen im Hinblick auf die Leistung erläutert werden. Beachten Sie die folgenden Punkte:

  • CSS-basierte Animationen und Webanimationen (sofern nativ unterstützt) werden in der Regel in einem Thread verarbeitet, der als „Compositor-Thread“ bezeichnet wird. Dies unterscheidet sich vom „Hauptthread“ des Browsers, in dem Stil, Layout, Painting und JavaScript ausgeführt werden. Wenn der Browser also einige teure Aufgaben im Hauptthread ausführt, können diese Animationen ohne Unterbrechung fortgesetzt werden.

  • Andere Änderungen an Transformationen und an der Deckkraft können in vielen Fällen auch vom Compositor-Thread übernommen werden.

  • Wenn eine Animation Farbe, Layout oder beides auslöst, ist der Hauptthread erforderlich. Dies gilt sowohl für CSS- als auch für JavaScript-basierte Animationen. Der Mehraufwand für Layout oder Paint wird wahrscheinlich alle Arbeiten in Verbindung mit der CSS- oder JavaScript-Ausführung in den Vordergrund stellen und die Frage verwirren.