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 Sie 60 fps beibehalten. Andernfalls kommt es zu Rucklern oder Aussetzern, die für Nutzer wahrnehmbar sind und die Nutzererfahrung beeinträchtigen.

• Achten Sie darauf, dass Ihre Animationen keine Leistungsprobleme verursachen. Sie sollten die Auswirkungen der Animation einer bestimmten CSS-Eigenschaft kennen.
• Die Animation von Eigenschaften, die die Geometrie der Seite (Layout) ändern oder zu Malvorgängen führen, ist besonders ressourcenintensiv.
• Ändern Sie nach Möglichkeit nur die Transformationen und die Deckkraft.
• Mit will-change informieren Sie den Browser darüber, 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 die width und height eines Elements animieren, ändert sich seine Geometrie und andere Elemente auf der Seite werden möglicherweise verschoben oder ihre Größe verändert. 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.

Vollständige Anleitung zum Erstellen leistungsstarker Animationen

will-change-Property verwenden

Mit will-change teilen Sie dem Browser mit, 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 alle Elemente in der aktuellen Ansicht Ihrer App, die 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 diese Funktion unterstützen (derzeit die meisten modernen Browser), führen nun 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 Folgendes:

• 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 Stil, Layout, Darstellung 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 das Zeichnen, das Layout oder beides auslöst, muss der „Hauptthread“ arbeiten. 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.