Animationen und Leistung

Animationen müssen gut funktionieren, da sie sonst die Nutzerfreundlichkeit beeinträchtigen.

Paul Lewis

Sam Thorogood

Achten Sie darauf, dass Animationen immer mit 60 fps ausgeführt werden. Bei einer niedrigeren Framerate kommt es zu Rucklern oder Verzögerungen, die Nutzer bemerken und die sich negativ auf die Nutzerfreundlichkeit auswirken.

• Achten Sie darauf, dass Ihre Animationen keine Leistungsprobleme verursachen. Sie sollten wissen, welche Auswirkungen die Animation einer bestimmten CSS-Eigenschaft hat.
• Das Animieren von Eigenschaften, die die Geometrie der Seite (Layout) ändern oder das Rendern verursachen, ist besonders aufwendig.
• Ändern Sie nach Möglichkeit nur Transformationen und Deckkraft.
• Verwenden Sie will-change, damit der Browser weiß, was Sie animieren möchten.

Das Animieren von Attributen ist nicht kostenlos. Einige Attribute sind günstiger zu animieren als andere. Wenn Sie beispielsweise die width- und height-Eigenschaften eines Elements animieren, ändert sich seine Geometrie. Das kann dazu führen, dass sich andere Elemente auf der Seite verschieben oder ihre Größe ändern. Dieser Vorgang wird als Layout (oder Umfluss in Gecko-basierten Browsern wie Firefox) bezeichnet und kann zeitaufwendig sein, wenn Ihre Seite viele Elemente enthält. Immer wenn das Layout ausgelöst wird, muss die Seite oder ein Teil davon gerendert werden. Das ist in der Regel noch aufwendiger als die Layoutoperation selbst.

Vermeiden Sie nach Möglichkeit, Eigenschaften zu animieren, die Layout oder Rendering auslösen. Bei den meisten modernen Browsern bedeutet das, dass Animationen auf opacity oder transform beschränkt werden sollten, da der Browser diese beiden Eigenschaften sehr gut optimieren kann. Es spielt keine Rolle, ob die Animation von JavaScript oder CSS übernommen wird.

Vollständiger Leitfaden zum Erstellen leistungsstarker Animationen

will-change-Attribut verwenden

Verwenden Sie will-change, damit der Browser weiß, 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 häufig, da dies dazu führen kann, dass der Browser Ressourcen verschwendet, was wiederum zu noch mehr Leistungsproblemen führt.

Als Faustregel gilt: Wenn die Animation innerhalb der nächsten 200 ms ausgelöst werden könnte, entweder durch eine Nutzerinteraktion oder aufgrund des Status Ihrer Anwendung, ist es sinnvoll, will-change für animierte Elemente zu verwenden. In den meisten Fällen sollte für jedes Element in der aktuellen Ansicht Ihrer App, das Sie animieren möchten, will-change für alle 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;
}

Browser, die diese Funktion unterstützen, derzeit die meisten modernen Browser, nehmen dann im Hintergrund die entsprechenden Optimierungen vor, um das Ändern oder Animieren dieser Eigenschaften zu ermöglichen.

Leistung von CSS im Vergleich zu JavaScript

Im Web gibt es viele Seiten und Kommentarbereiche, in denen die relativen Vorteile von CSS- und JavaScript-Animationen aus Leistungssicht diskutiert werden. Folgendes ist zu beachten:

• CSS-basierte Animationen und Web Animations, sofern sie nativ unterstützt werden, werden in der Regel in einem Thread verarbeitet, der als „Compositor-Thread“ bezeichnet wird. Das unterscheidet sich vom „Hauptthread“ des Browsers, in dem Styling, Layout, Rendering und JavaScript ausgeführt werden. Wenn der Browser also einige rechenintensive Aufgaben im Hauptthread ausführt, können diese Animationen ohne Unterbrechung fortgesetzt werden.

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

• Wenn eine Animation das Rendern, das Layout oder beides auslöst, muss der Hauptthread die Arbeit erledigen. Das gilt sowohl für CSS- als auch für JavaScript-basierte Animationen. Der Aufwand für Layout oder Rendering wird wahrscheinlich jede Arbeit im Zusammenhang mit der Ausführung von CSS oder JavaScript in den Schatten stellen, sodass die Frage hinfällig wird.