Nur-Kompositor-Eigenschaften beibehalten und Anzahl der Ebenen verwalten

Beim Compositing werden die dargestellten Teile der Seite zur Anzeige auf dem Bildschirm zusammengesetzt.

Beim Compositing werden die dargestellten Teile der Seite auf dem Bildschirm angezeigt wird.

In diesem Bereich gibt es zwei wichtige Faktoren, die sich auf die Seitenleistung auswirken: die Anzahl der zusammengesetzten Ebenen, die verwaltet werden müssen, und die Eigenschaften, die Sie für Animationen verwenden.

Zusammenfassung

• Behalten Sie die Transformations- und Deckkraftänderungen für Ihre Animationen bei.
• Verschieben Sie Elemente mit will-change oder translateZ.
• Vermeiden Sie die übermäßige Verwendung von Regeln für bevorzugte Suchergebnisse. sind Speicher und Verwaltung erforderlich.

Umwandlungs- und Deckkraftänderungen für Animationen verwenden

Die leistungsstärkste Version der Pixelpipeline vermeidet sowohl Layout als auch Paint und erfordert nur Compositing-Änderungen:

Dazu müssen Sie sich an sich ändernde Eigenschaften halten, die vom Compositor allein verarbeitet werden können. Derzeit gibt es nur zwei Attribute, auf die dies zutrifft: transforms und opacity:

transform und opacity dürfen nur verwendet werden, wenn sich das Element, für das Sie diese Eigenschaften ändern, in einer eigenen zusammengesetzten Ebene befinden sollte. Um eine Ebene zu erstellen, müssen Sie das Element hochstufen, was wir als Nächstes behandeln.

Elemente hervorheben, die Sie animieren möchten

Wie bereits im Abschnitt Anstrichkomplexität vereinfachen und Farbbereiche reduzieren erwähnt -Abschnitt, sollten Sie Elemente, die Sie animieren möchten (in angemessenem Rahmen, nicht übertreiben!) auf eine eigene Ebene übertragen:

.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

Dann ist es vielleicht verlockend, in dem Wissen, dass Ebenen häufig zur Leistungssteigerung beitragen, alle Elemente auf Ihrer Seite mit einem der folgenden Elemente zu präsentieren:

* {
  will-change: transform;
  transform: translateZ(0);
}

Das bedeutet, dass Sie jedes einzelne Element auf der Seite bewerben möchten. Das Problem hier ist, dass jede erstellte Ebene Arbeitsspeicher und Verwaltung erfordert, und 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, sodass es weitere Einschränkungen hinsichtlich der Bandbreite zwischen CPU und GPU sowie des für Texturen auf der GPU verfügbaren Arbeitsspeichers gibt.

Mit den Chrome-Entwicklertools die Ebenen in Ihrer App analysieren

Um ein Verständnis der Ebenen in Ihrer Anwendung zu erhalten und herauszufinden, warum ein Element eine Ebene hat, müssen Sie den Paint-Profiler in den Chrome-Entwicklertools aktivieren. Zeitplan:

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 eine neue Option in den Details angezeigt: die Registerkarte „Ebenen“.

Diese Option öffnet eine neue Ansicht, in der Sie alle Ebenen in diesem Frame schwenken, scannen und heranzoomen können, zusammen mit den Gründen, aus denen die einzelnen Ebenen erstellt wurden.

In dieser Ansicht können Sie die Anzahl der vorhandenen Ebenen verfolgen. Wenn Sie bei leistungskritischen Aktionen wie Scrollen oder Übergängen viel Zeit mit dem Erstellen verbringen (sollten Sie etwa 4–5 ms anstreben), können Sie anhand der Informationen hier sehen, wie viele Ebenen Sie haben, warum sie erstellt wurden, und die Anzahl der Ebenen in Ihrer App verwalten.