Beim Compositing werden die gezeichneten Teile einer Seite zur Anzeige auf dem Bildschirm zusammengefügt.
Beim Compositing werden die gezeichneten Teile der Seite zur Anzeige auf dem Bildschirm zusammengefügt.
In diesem Bereich gibt es zwei Hauptfaktoren, 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
- Nehmen Sie nur Änderungen an der Transformation und der Deckkraft Ihrer Animationen vor.
- Bewegliche Elemente mit
will-changeodertranslateZhochstufen. - Vermeiden Sie die übermäßige Verwendung von Angebotsregeln. Ebenen erfordern Arbeitsspeicher und Verwaltung.
Änderungen an Transformationen und Deckkraft für Animationen verwenden
Die leistungsstärkste Version der Pixelpipeline vermeidet sowohl Layout als auch Paint und erfordert nur Compositing-Änderungen:
Um dies zu erreichen, müssen Sie sich an das Ändern der Eigenschaften halten, die vom Compositor allein verarbeitet werden können. Heute gibt es nur zwei Eigenschaften, die zutreffen: transform und opacity:
Bei der Verwendung von transforms und opacity ist zu beachten, dass sich das Element, auf dem Sie diese Eigenschaften ändern, auf einer eigenen Compositor-Ebene befinden sollte. Um eine Ebene zu erstellen, müssen Sie das Element hochstufen, was wir im nächsten Schritt behandeln werden.
Elemente bewerben, die Sie animieren möchten
Wie bereits im Abschnitt Farbkomplexität vereinfachen und Farbbereiche reduzieren erwähnt, sollten Sie Elemente, die Sie animieren möchten, in einer eigenen Ebene platzieren (nicht übertreiben Sie es nicht!)
.moving-element {
will-change: transform;
}
Bei älteren Browsern oder solchen, die keine Unterstützung bieten, wird Folgendes geändert:
.moving-element {
transform: translateZ(0);
}
Ebenen verwalten und Ebenenexplosionen vermeiden
Es mag verlockend sein, zu wissen, dass Ebenen oft die Leistung verbessern, und alle Elemente auf Ihrer Seite folgendermaßen hochzustufen:
* {
will-change: transform;
transform: translateZ(0);
}
Sie möchten also jedes einzelne Element auf der Seite hervorheben. Das Problem ist, dass jede von Ihnen erstellte Ebene Speicher- und Verwaltungsaufwand erfordert, und das ist nicht kostenlos. Bei Geräten mit begrenztem Arbeitsspeicher können die Auswirkungen auf die Leistung sogar die Vorteile einer Schicht bei weitem überwiegen. Die Texturen jeder Ebene müssen in die GPU hochgeladen werden. Daher gibt es weitere Einschränkungen in Bezug auf die Bandbreite zwischen CPU und GPU und den verfügbaren Speicher für Texturen auf der GPU.
Mit den Chrome-Entwicklertools die Ebenen Ihrer App verstehen
Um die Ebenen in Ihrer Anwendung zu verstehen und herauszufinden, warum ein Element eine Ebene hat, müssen Sie den Paint-Profiler in der Zeitachse der Chrome-Entwicklertools aktivieren:
Wenn diese Funktion aktiviert ist, solltest du eine Aufnahme machen. Wenn die Aufzeichnung beendet ist, können Sie auf einzelne Frames klicken, die sich zwischen den Frames-per-Second-Balken und den Details befinden:
Wenn Sie darauf klicken, erscheint eine neue Option in den Details: der Tab „Layer“.
Diese Option öffnet eine neue Ansicht, in der Sie alle Ebenen während dieses Frames schwenken, scannen und heranzoomen können, zusammen mit den Gründen für die Erstellung der jeweiligen Ebene.
In dieser Ansicht können Sie die Anzahl Ihrer Ebenen verfolgen. Wenn Sie bei leistungskritischen Aktionen wie Scrollen oder Übergängen viel Zeit mit der Erstellung von Komponenten verbringen (etwa 4–5 ms), können Sie anhand dieser Informationen sehen, wie viele Ebenen Sie haben und warum sie erstellt wurden. Von dort aus können Sie die Anzahl der Ebenen in Ihrer App verwalten.