Im Bereich Leistung wird jede lang andauernde Aufgabe mit einem roten Dreieck in der oberen rechten Ecke und eine Warnung auf dem Tab Zusammenfassung gekennzeichnet. Dies weist auf Arbeiten im Hauptthread hin, die sehr lange und mit geringer Leistung ausgeführt werden:
In Ihren Leistungsaufzeichnungen können einige dieser lang andauernden Aufgaben Stil neu berechnen sein. Mit einem Ereignis vom Typ Stil neu berechnen wird die Zeit erfasst, die der Browser für folgende Aktionen benötigt:
- Durchlaufen Sie die DOM-Elemente auf einer Seite, um alle CSS-Stilregeln zu finden, die mit einem bestimmten Element übereinstimmen.
- Der tatsächliche Stil jedes Elements wird anhand der entsprechenden CSS-Stilregeln berechnet.
CSS-Stile müssen immer dann neu berechnet werden, wenn sich die Anwendbarkeit von CSS-Regeln geändert hat, z. B. in folgenden Fällen:
- Elemente werden zum DOM hinzugefügt oder daraus entfernt.
- Die Attribute eines Elements werden geändert, beispielsweise der Wert einer Klasse oder eines ID-Attributs.
- Der Nutzer nimmt eine Eingabe vor, z. B. eine Mausbewegung oder eine Änderung des Elementfokus, die sich auf
:hover-Regeln auswirken kann.
Bei lang andauernden Ereignissen vom Typ Stil neu berechnen können Sie auf dem Tab Selektorstatistiken herausfinden, welche CSS-Selektoren die meiste Zeit in Anspruch nehmen und die Leistung verlangsamen.
Auf dem Tab Selektorstatistiken finden Sie Statistiken zu den CSS-Regelselektoren, die an mindestens einem Ereignis des Typs Stil neu berechnen in einer Leistungsaufzeichnung beteiligt waren.
Leistungs-Trace mit aktivierter Option „Selektorstatistiken“ aufzeichnen
Wenn Sie die Statistiken Ihrer CSS-Regelselektoren während eines lang andauernden Ereignisses des Typs Stil neu berechnen ansehen möchten, müssen Sie ein Leistungs-Trace aufzeichnen und die Erfassungseinstellung Selektorstatistik aktivieren.
So zeichnen Sie ein Leistungs-Trace mit Auswahlstatistiken auf:
Öffnen Sie eine Webseite, z. B. die Demoseite der Fotogalerie.
Öffnen Sie die Entwicklertools und gehen Sie zum Bereich Leistung.
Klicken Sie im Steuerfeld Leistung auf die Schaltfläche Einstellungen Capture-Einstellungen und dann auf check_box CSS-Selektor-Statistiken aktivieren.
Klicken Sie auf radio_button_checked Aufzeichnen, führen Sie das Szenario aus, das Sie verbessern möchten, und klicken Sie dann auf radio_button_checked Beenden.
Anschließend können Sie sich die Statistiken für CSS-Selektoren ansehen, wie in den nächsten Abschnitten beschrieben.
Statistiken zur CSS-Regelauswahl für ein einzelnes Ereignis aufrufen
So rufen Sie die Statistiken der CSS-Regelselektoren auf, die an einem einzelnen Ereignis des Typs Stil neu berechnen beteiligt sind:
Erfassen Sie ein Leistungs-Trace mit aktivierter Selektorstatistik.
Suchen Sie in Ihrer Leistungsaufzeichnung nach dem Ereignis Stil neu berechnen und klicken Sie darauf.
Öffnen Sie im unteren Bereich des Steuerfelds Leistung den Tab Auswahlstatistiken.
Tabelle der CSS-Selektoren auf dem Tab „Selektorstatistiken“
Der Tab Selektorstatistiken enthält eine Tabelle mit CSS-Selektoren. Die Tabelle enthält die folgenden Informationen für jeden CSS-Selektor:
| Spalte | Beschreibung |
|---|---|
| Verstrichen (ms) | Die Zeit, die der Browser mit dem Abgleich dieses CSS-Selektors verbracht hat. Diese Zeit wird in Millisekunden (ms) angegeben, wobei 1 ms 1/1000 einer Sekunde entspricht. |
| Übereinstimmungsversuche | Die Anzahl der Elemente, die die Browser-Engine mit diesem CSS-Selektor abgeglichen hat. |
| Anzahl der Übereinstimmungen | Die Anzahl der Elemente, die die Browser-Engine mit diesem CSS-Selektor abgeglichen hat. |
| % nicht übereinstimmender Slow-Path-Daten | Das Verhältnis der Elemente, die nicht mit diesem CSS-Selektor übereinstimmten, zu den Elementen, die von der Browser-Engine abgeglichen werden wollten und für die die Browser-Engine weniger optimierten Code verwenden musste. |
| Selector | Der CSS-Selektor, der abgeglichen wurde. |
| CSS | Das CSS-Stylesheet, das den CSS-Selektor enthält |
Öffnen Sie anschließend im Bereich Leistung die Einstellungen Aufnahmeeinstellungen und entfernen Sie das Häkchen bei check_box CSS-Selektor-Statistiken aktivieren.
Statistiken zur CSS-Regelauswahl für mehrere Ereignisse ansehen
Wenn Sie zusammengefasste Statistiken der CSS-Regelselektoren sehen möchten, die an mehreren Ereignissen vom Typ Stil neu berechnen beteiligt sind, kopieren Sie mehrere Tabellen mit Selektorstatistiken in eine Tabelle. Gehen Sie dazu so vor:
Erfassen Sie ein Leistungs-Trace mit aktivierter Selektorstatistik.
Klicken Sie auf das erste Ereignis Stil neu berechnen, das Sie interessiert.
Öffnen Sie im unteren Bereich des Steuerfelds Leistung den Tab Auswahlstatistiken.
Klicken Sie mit der rechten Maustaste auf die Statistiktabellen zur Auswahl und wählen Sie Tabelle kopieren aus.
Fügen Sie die Tabelle in eine Tabelle ein, z. B. eine Google-Tabelle.
Wiederholen Sie die vorherigen Schritte mit den anderen Ereignissen Stil neu berechnen, an denen Sie interessiert sind.
Öffnen Sie anschließend im Bereich Leistung die Einstellungen Aufnahmeeinstellungen und entfernen Sie das Häkchen bei check_box CSS-Selektor-Statistiken aktivieren.
Aggregierte Statistiken zur CSS-Regelauswahl für die vollständige Aufzeichnung ansehen
So rufen Sie zusammengefasste Statistiken der CSS-Regelselektoren auf, die an der gesamten Leistungsaufzeichnung beteiligt sind:
Erfassen Sie ein Leistungs-Trace mit aktivierter Selektorstatistik.
Klicken Sie auf einen leeren Bereich des Flame-Diagramms, um die Auswahl eines eventuell ausgewählten Ereignisses aufzuheben.
Wählen Sie den gesamten Aufnahmebereich aus. Doppelklicken Sie dazu oben im Bereich Leistung auf das CPU-Diagramm.
Öffnen Sie im unteren Bereich des Steuerfelds Leistung den Tab Auswahlstatistiken. Oben sehen Sie eine neue Zeile mit Daten zu den Gesamtwerten für alle Selektoren.
Öffnen Sie anschließend im Bereich Leistung die Einstellungen Aufnahmeeinstellungen und entfernen Sie das Häkchen bei check_box CSS-Selektor-Statistiken aktivieren.
CSS-Selektorstatistiken analysieren
Klicken Sie auf eine Spaltenüberschrift, um die Daten in der Tabelle Selektorstatistiken in aufsteigender oder absteigender Reihenfolge zu sortieren. Wenn Sie beispielsweise sehen möchten, welche CSS-Selektoren am meisten Zeit in Anspruch nehmen, klicken Sie auf die Spaltenüberschrift Verstrichen (ms).
Wenn Sie die Leistung Ihrer Webseite verbessern möchten, konzentrieren Sie sich auf die CSS-Selektoren, die:
- Die Berechnung hat lange gedauert (hoher Wert für Verstrichene Zeit (ms)).
- Gibt an, welcher Browser mehrmals eine Übereinstimmung versucht hat (hoher Wert für Übereinstimmungsversuche).
- Gibt an, dass der Browser nicht viele Elemente zugeordnet hat (niedriger Wert für Übereinstimmungsanzahl im Vergleich zum Wert für Übereinstimmungsversuche).
- die einen hohen Prozentsatz an Slow-Path-Nichtübereinstimmungen aufweisen.
Zum Beispiel im vorherigen Screenshot:
- Der erste CSS-Selektor (
html body .ps[tooltip...) brauchte die meiste Zeit. - Die Browser-Engine hat 1.104 Mal versucht, diesen CSS-Selektor zuzuordnen, hat aber keine Elemente abgeglichen.
Daher ist dieser CSS-Selektor der erste Kandidat für eine Verbesserung.
Ändern Sie Ihre CSS-Selektoren so, dass weniger Zeit für die Berechnung und Übereinstimmung von weniger Elementen auf der Seite benötigt wird. Wie Sie Ihre CSS-Selektoren verbessern können, hängt vom jeweiligen Anwendungsfall ab.
Wiederholen Sie die Schritte in dieser Anleitung, um zu überprüfen, ob Ihre Änderungen in der Spalte Verstrichen (ms) dazu beigetragen haben, die Dauer des Ereignisses Stil neu berechnen zu verringern.