Beim Compositing werden die gezeichneten Teile der Seite zusammengesetzt, um sie auf dem Bildschirm anzuzeigen.
Beim Compositing werden die gezeichneten Teile der Seite zusammengesetzt, um sie auf dem Bildschirm anzuzeigen.
In diesem Bereich gibt es zwei wichtige Faktoren, die sich auf die Seitenleistung auswirken: die Anzahl der zu verwaltenden Kompositionsebenen und die Eigenschaften, die Sie für Animationen verwenden.
Zusammenfassung
- Verwenden Sie für Ihre Animationen nur Transformationen und Deckkraftänderungen.
- Bewegliche Elemente mit
will-changeodertranslateZhervorheben - Verwenden Sie nicht zu viele Angebotsregeln. Ebenen erfordern Arbeitsspeicher und Verwaltung.
Transformationen und Deckkraftänderungen für Animationen verwenden
Die Version der Pixelpipeline mit der besten Leistung vermeidet sowohl Layout als auch Paint und erfordert nur Compositing-Änderungen:
Dazu müssen Sie nur Eigenschaften ändern, die vom Renderer allein verarbeitet werden können. Derzeit gibt es nur zwei Properties, für die das zutrifft: transform und opacity:
Bei der Verwendung von transform und opacity ist zu beachten, dass sich das Element, für das Sie diese Eigenschaften ändern, in einer eigenen Compositor-Ebene befinden muss. Um eine Ebene zu erstellen, müssen Sie das Element entsprechend hochstufen. Das wird im nächsten Schritt erläutert.
Elemente hervorheben, die Sie animieren möchten
Wie bereits im Abschnitt Komplexität der Malerei vereinfachen und Malbereiche reduzieren erwähnt, sollten Sie Elemente, die Sie animieren möchten, in eine eigene Ebene verschieben (in einem angemessenen Rahmen, übertreiben Sie es nicht!):
.moving-element {
will-change: transform;
}
Bei älteren Browsern bzw. bei Browsern, die dies nicht unterstützen, ändert sich Folgendes:
.moving-element {
transform: translateZ(0);
}
Ebenen verwalten und Ebenenexplosionen vermeiden
Es ist also verlockend, in dem Wissen, dass Ebenen häufig zur Leistungssteigerung beitragen, alle Elemente auf Ihrer Seite mit etwa folgenden Elementen zu präsentieren:
* {
will-change: transform;
transform: translateZ(0);
}
Das bedeutet, dass Sie jedes einzelne Element auf der Seite bewerben möchten. Das Problem dabei ist, dass jede Ebene, die Sie erstellen, Speicher und Verwaltung erfordert. Das ist nicht kostenlos. Auf Geräten mit begrenztem Arbeitsspeicher können die Auswirkungen auf die Leistung die Vorteile der Erstellung 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 Arbeitsspeicher.
Mit den Chrome-Entwicklertools die Ebenen in Ihrer App analysieren
Wenn Sie die Ebenen in Ihrer Anwendung und die Gründe für die Ebenen eines Elements verstehen möchten, müssen Sie den Paint-Profiler in der Zeitachse von Chrome DevTools aktivieren:
Wenn diese Option aktiviert ist, sollten Sie eine Aufnahme machen. Wenn die Aufzeichnung beendet ist, können Sie auf einzelne Frames klicken. Sie finden diese zwischen den Frames pro Sekunde-Balken und den Details:
Wenn Sie darauf klicken, wird in den Details eine neue Option angezeigt: ein Ebenen-Tab.
Dadurch wird eine neue Ansicht geöffnet, in der Sie alle Ebenen in diesem Frame 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 vorhandenen Ebenen verfolgen. Wenn Sie bei leistungskritischen Aktionen wie Scrollen oder Übergängen viel Zeit für das Compositing benötigen (Sie sollten etwa 4–5 ms anstreben), können Sie anhand der hier aufgeführten Informationen sehen, wie viele Ebenen Sie haben, warum sie erstellt wurden, und die Anzahl der Ebenen in Ihrer App verwalten.