Animationen und Leistung

Animationen müssen eine gute Leistung erzielen, da sie sonst die Nutzerfreundlichkeit beeinträchtigen.

Paul Lewis

Sam Thorogood

Achten Sie bei Animationen darauf, dass 60 fps beibehalten werden, da weniger zu Rucklern oder Aussetzern führt, die für Ihre Nutzer wahrnehmbar sind und sich negativ auf die Nutzerfreundlichkeit auswirken.

• Achten Sie darauf, dass Ihre Animationen keine Leistungsprobleme verursachen. Informieren Sie sich unbedingt über die Auswirkungen der Animation einer bestimmten CSS-Property.
• Besonders kostspielig sind die Animierung von Eigenschaften, die die Geometrie der Seite (Layout) ändern oder eine Darstellung auslösen.
• Ändern Sie nach Möglichkeit nur die Transformationen und die Deckkraft.
• Verwenden Sie will-change, damit der Browser weiß, was Sie animieren möchten.

Die Animation von Unterkünften ist nicht kostenlos. Einige Unterkünfte lassen sich günstiger animieren als andere. Wenn Sie beispielsweise width und height eines Elements animieren, ändert sich seine Geometrie und andere Elemente auf der Seite können sich verschieben oder ihre Größe ändern. Dieser Vorgang wird Layout (oder Reflow in Gecko-basierten Browsern wie Firefox) genannt und kann sehr aufwendig sein, wenn Ihre Seite viele Elemente enthält. Wenn das Layout ausgelöst wird, muss die Seite oder ein Teil davon normalerweise neu gerendert werden, was in der Regel noch teurer ist als der Layoutvorgang selbst.

Vermeiden Sie nach Möglichkeit das Animieren von Eigenschaften, die das Layout oder die Malerei auslösen. Für die meisten modernen Browser bedeutet das, Animationen auf opacity oder transform zu beschränken, die beide vom Browser stark optimiert werden können. Dabei spielt es keine Rolle, ob die Animation über JavaScript oder CSS gesteuert wird.

Lesen Sie einen vollständigen Leitfaden zum Erstellen von leistungsstarken Animationen.

will-change-Attribut verwenden

Mithilfe von will-change wird dem Browser mitgeteilt, dass Sie die Eigenschaft eines Elements ändern möchten. So kann der Browser die am besten geeigneten Optimierungen vornehmen, bevor Sie die Änderung vornehmen. Verwenden Sie will-change jedoch nicht zu oft, da der Browser sonst Ressourcen verschwenden kann, was wiederum zu weiteren Leistungsproblemen führt.

Als Faustregel gilt: Wenn die Animation in den nächsten 200 Millisekunden ausgelöst werden könnte, entweder durch die Interaktion eines Nutzers oder aufgrund des Zustands Ihrer Anwendung, ist es eine gute Idee, will-change für animierte Elemente zu verwenden. In den meisten Fällen sollte also für jedes Element in der aktuellen Ansicht Ihrer App, das Sie animieren möchten, will-change für die Eigenschaften aktiviert sein, die Sie ändern möchten. Im Fall des Box-Beispiels, das wir in den vorherigen Anleitungen verwendet haben, sieht das Hinzufügen von will-change für Transformationen und Deckkraft so aus:

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

Die Browser, die das unterstützen, also die meisten modernen Browser, führen jetzt die entsprechenden Optimierungen aus, um das Ändern oder Animieren dieser Eigenschaften zu ermöglichen.

Leistung von CSS im Vergleich zu JavaScript

Im Web gibt es viele Seiten und Kommentarthreads, in denen die relativen Vorzüge von CSS- und JavaScript-Animationen aus Sicht der Leistung diskutiert werden. Beachten Sie dabei die folgenden Punkte:

• CSS-basierte Animationen und Web-Animationen, die nativ unterstützt werden, werden in der Regel in einem Thread verarbeitet, der als „Compositor-Thread“ bezeichnet wird. Dies unterscheidet sich vom „Hauptthread“ des Browsers, in dem Styling, Layout, Painting und JavaScript ausgeführt werden. Das bedeutet, dass diese Animationen auch dann weiterlaufen können, wenn der Browser einige ressourcenintensive Aufgaben im Hauptthread ausführt.

• Andere Änderungen an Transformationen und Deckkraft können in vielen Fällen auch vom Compose-Thread verarbeitet werden.

• Wenn eine Animation die Farbe, das Layout oder beides auslöst, muss der „Hauptthread“ funktionieren. Das gilt sowohl für CSS- als auch für JavaScript-basierte Animationen. Der Overhead von Layout oder Paint wird wahrscheinlich jede Arbeit im Zusammenhang mit der Ausführung von CSS oder JavaScript in den Schatten stellen, wodurch die Frage irrelevant wird.