Animationen müssen gut funktionieren, da sie sonst die User Experience beeinträchtigen.
Bei der Animation sollten 60 fps beibehalten werden, da dies zu Ruckeln oder Stockungen führt, die für die Nutzer wahrnehmbar sind und sich negativ auf die Nutzererfahrung 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.
- Behalten Sie, wo möglich, wechselnde Transformationen und Deckkraft bei.
- Verwenden Sie
will-change, damit der Browser weiß, was Sie animieren möchten.
Das Animieren von Eigenschaften ist nicht kostenlos und einige Eigenschaften sind kostengünstiger zu 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 als Layout (oder Reflow in Gecko-basierten Browsern wie Firefox) bezeichnet und kann teuer sein, wenn Ihre Seite viele Elemente enthält. Wenn das Layout ausgelöst wird, muss normalerweise die Seite oder ein Teil davon gezeichnet werden, was in der Regel noch teurer ist als der Layoutvorgang selbst.
Wo möglich, sollten Sie keine Eigenschaften animieren, die Layout oder Darstellung auslösen. Für die meisten modernen Browser bedeutet dies, dass Animationen auf opacity oder transform beschränkt werden, was vom Browser in hohem Maße optimiert werden kann. Dabei spielt es keine Rolle, ob die Animation von JavaScript oder CSS verarbeitet wird.
Lesen Sie einen vollständigen Leitfaden zum Erstellen von leistungsstarken Animationen.
Attribut will-change 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 schon vor einer Änderung vornehmen. Verwende will-change jedoch nicht zu häufig. Ansonsten verschwendet der Browser möglicherweise Ressourcen, was wiederum zu noch mehr Leistungsproblemen führen kann.
Als Faustregel gilt: Wenn die Animation in den nächsten 200 ms ausgelöst werden kann, entweder durch eine Nutzerinteraktion oder aufgrund des Status Ihrer App, empfiehlt es sich, will-change für animierte Elemente zu verwenden. In den meisten Fällen sollte will-change für jedes Element in der aktuellen Ansicht Ihrer App, das Sie animieren möchten, für die zu ändernden Properties aktiviert sein. Bei dem Feldbeispiel, 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;
}
Jetzt werden die aktuellsten Browser, die diese Funktion unterstützen, die entsprechenden Optimierungen vornehmen, um diese Eigenschaften zu ändern oder zu animieren.
CSS- und JavaScript-Leistung im Vergleich
Im Web gibt es viele Seiten und Kommentare, in denen die relativen Vorzüge von CSS- und JavaScript-Animationen im Hinblick auf die Leistung diskutiert werden. Beachten Sie dabei die folgenden Punkte:
CSS-basierte Animationen und Webanimationen, sofern sie nativ unterstützt werden, werden normalerweise in einem Thread verarbeitet, der als „Kompositor-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 kostspielige Aufgaben im Hauptthread ausführt, können diese Animationen ohne Unterbrechung fortgesetzt werden.
Andere Änderungen an Transformationen und Deckkraft können in vielen Fällen auch vom Compositor-Thread übernommen werden.
Wenn eine Animation die Farbe, das Layout oder beides auslöst, muss der „Hauptthread“ funktionieren. Dies gilt sowohl für CSS- als auch für JavaScript-basierte Animationen und der Mehraufwand für Layout oder Paint wird wahrscheinlich alle Arbeiten im Zusammenhang mit CSS oder JavaScript-Ausführungen in den Schatten stellen, sodass die Frage ignoriert wird.