Beim Compositing werden die gezeichneten Teile der Seite für die Anzeige auf dem Bildschirm zusammengesetzt. Nicht zusammengesetzte Animationen erfordern mehr Arbeit und können auf Smartphones mit geringer Leistung oder bei leistungsintensiven Aufgaben im Hauptthread ruckelig (nicht flüssig) wirken.
In diesem Bereich gibt es zwei wichtige Faktoren, die sich auf die Seitenleistung auswirken: die Anzahl der Compositor-Ebenen, die verwaltet werden müssen, und die Eigenschaften, die Sie für Animationen verwenden.
Zusammenfassung
- Verwenden Sie für Ihre Animationen nur Änderungen an der Transformation und der Deckkraft.
- Bewerben Sie bewegliche Elemente mit
will-changeodertranslateZ. - Verwenden Sie nicht zu viele Hochstufungsregeln. Ebenen erfordern Arbeitsspeicher und Verwaltung.
Verwenden Sie Transformations- und Deckkraftänderungen für Animationen.
Die leistungsstärkste Version der Pixel-Pipeline vermeidet sowohl Layout als auch Paint und erfordert nur Compositing-Änderungen:
Dazu müssen Sie sich auf die Änderung von Eigenschaften beschränken, die allein vom Compositor verarbeitet werden können. Derzeit gibt es nur zwei Properties, für die das gilt: transforms und opacity:
Bei der Verwendung von transforms und opacity ist zu beachten, dass sich das Element, für das Sie diese Eigenschaften ändern, auf einer eigenen Compositor-Ebene befinden sollte. Um eine Ebene zu erstellen, müssen Sie das Element hochstufen. Darauf gehen wir als Nächstes ein.
Elemente, die Sie animieren möchten, hochstufen
Wie im Abschnitt Komplexität des Zeichnens vereinfachen und Zeichenbereiche reduzieren erwähnt, sollten Sie Elemente, die Sie animieren möchten, auf eine eigene Ebene verschieben. Übertreiben Sie es aber nicht:
.moving-element {
will-change: transform;
}
Oder für ältere Browser oder Browser, die „will-change“ nicht unterstützen:
.moving-element {
transform: translateZ(0);
}
Ebenen verwalten und Ebenenexplosionen vermeiden
Da Ebenen oft die Leistung verbessern, ist es vielleicht verlockend, alle Elemente auf Ihrer Seite mit etwas wie dem Folgenden zu bewerben:
* {
will-change: transform;
transform: translateZ(0);
}
Das ist eine umständliche Art zu sagen, dass Sie jedes einzelne Element auf der Seite bewerben möchten. Das Problem ist, dass jede Ebene, die Sie erstellen, Speicher und Verwaltung erfordert, was nicht kostenlos ist. Auf Geräten mit begrenztem Arbeitsspeicher kann die Auswirkung auf die Leistung sogar die Vorteile einer Ebene bei Weitem überwiegen. Die Texturen jeder Ebene müssen auf die GPU hochgeladen werden. Daher gibt es weitere Einschränkungen in Bezug auf die Bandbreite zwischen CPU und GPU sowie den für Texturen auf der GPU verfügbaren Speicher.
Mit den Chrome-Entwicklertools die Ebenen in Ihrer App nachvollziehen
Wenn Sie sich einen Überblick über die Ebenen in Ihrer Anwendung verschaffen und herausfinden möchten, warum ein Element eine Ebene hat, müssen Sie den Paint-Profiler in der Zeitachse der Chrome-Entwicklertools aktivieren:
Wenn diese Option aktiviert ist, solltest du eine Aufnahme machen. Wenn die Aufzeichnung abgeschlossen ist, können Sie auf einzelne Frames klicken, die sich zwischen den Balken für die Bilder pro Sekunde und den Details befinden:
Wenn Sie darauf klicken, wird in den Details eine neue Option angezeigt: ein Tab für Ebenen.
Mit dieser Option wird eine neue Ansicht geöffnet, in der Sie alle Ebenen während dieses Frames schwenken, scannen und heranzoomen können. Außerdem werden die Gründe für die Erstellung der einzelnen Ebenen angezeigt.
In dieser Ansicht können Sie die Anzahl der Ebenen sehen. Wenn Sie bei leistungskritischen Aktionen wie Scrollen oder Übergängen viel Zeit mit dem Compositing verbringen (Sie sollten etwa 4–5 ms anstreben), können Sie anhand der Informationen hier sehen, wie viele Ebenen Sie haben, warum sie erstellt wurden, und von dort aus die Anzahl der Ebenen in Ihrer App verwalten.