Im Steuerfeld Leistung werden alle Aufgaben mit langer Ausführungszeit oben rechts mit einem roten Dreieck und auf dem Tab Zusammenfassung mit einer Warnung gekennzeichnet. Dies weist darauf hin, dass die Ausführung des Hauptthreads sehr lange dauert und die Leistung langsam ist:
In Ihren Leistungsaufzeichnungen können einige dieser Aufgaben mit langer Ausführungszeit Ereignisse vom Typ Stil neu berechnen sein. Mit dem Ereignis Stil neu berechnen wird erfasst, wie lange der Browser benötigt, um Folgendes zu tun:
- Durch die DOM-Elemente auf einer Seite iterieren, um alle CSS-Stilregeln zu finden, die mit einem bestimmten Element übereinstimmen.
- Berechnen Sie den tatsächlichen Stil jedes Elements basierend auf den übereinstimmenden CSS-Stilregeln.
CSS-Stile müssen neu berechnet werden, wenn sich die Anwendbarkeit von CSS-Regeln geändert hat, beispielsweise in folgenden Fällen:
- Elemente werden dem DOM hinzugefügt oder daraus entfernt.
- Die Attribute eines Elements werden geändert, etwa der Wert einer Klasse oder eines ID-Attributs.
- Der Nutzer nimmt Eingaben vor, z. B. eine Mausbewegung oder eine Änderung des Elementfokus. Das kann sich auf die
:hover-Regeln auswirken.
Lang andauernde Ereignisse vom Typ Stil neu berechnen können zu Leistungsproblemen führen und zu langen Verzögerungen bei der Präsentation führen, die sich auf die Interaction to Next Paint (INP) Ihrer Website auswirken. Wenn Sie auf lang andauernde Ereignisse vom Typ Stil neu berechnen stoßen, können Sie auf dem Tab Selektorstatistiken herausfinden, welcher Ihrer CSS-Selektoren die meiste Zeit beansprucht und die Leistung verlangsamt.
Der Tab Selektorstatistiken enthält Statistiken zu CSS-Regelselektoren, die an mindestens einem Ereignis vom Typ Stil neu berechnen in einer Leistungsaufzeichnung beteiligt waren.
Leistungs-Trace mit aktiviertem Selektorstatistiken aufzeichnen
Wenn Sie die Statistiken Ihrer CSS-Regelselektoren bei lang andauernden Ereignissen vom Typ Stil neu berechnen ansehen möchten, erstellen Sie einen Leistungs-Trace, bei dem die Erfassungseinstellung Selektorstatistiken aktiviert ist.
So erfassen Sie einen Leistungs-Trace mit Auswahlstatistiken:
Öffnen Sie eine Webseite, z. B. die Demoseite für die Fotogalerie.
Öffnen Sie die Entwicklertools und rufen Sie den Bereich Leistung auf.
Klicken Sie im Bereich Leistung auf die Schaltfläche Einstellungen Erfassungseinstellungen und dann auf check_box CSS-Selektorstatistiken 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 Stopp.
Rufen Sie dann CSS-Selektorstatistiken auf, wie in den nächsten Abschnitten beschrieben.
Statistiken zur CSS-Regelauswahl für ein einzelnes Ereignis ansehen
So rufen Sie die Statistiken der CSS-Regelselektoren auf, die an einem einzelnen Ereignis vom Typ Stil neu berechnen beteiligt sind:
Zeichnen Sie einen Leistungs-Trace mit aktivierten Selektorstatistiken auf.
Suchen Sie in Ihrer Leistungsaufzeichnung nach dem Ereignis Stil neu berechnen und klicken Sie darauf.
Öffnen Sie unten im Bereich Leistung den Tab Selektorstatistiken.
Tabelle der CSS-Selektoren auf dem Tab "Selektorstatistiken"
Der Tab Selektorstatistiken enthält eine Tabelle mit CSS-Selektoren. Die Tabelle enthält für jeden CSS-Selektor die folgenden Informationen:
| Spalte | Beschreibung |
|---|---|
| Verstrichen (ms) | Die Zeit, die der Browser für die Anpassung dieses CSS-Selektors benötigt hat. Diese Zeit wird in Millisekunden (ms) angegeben, wobei 1 ms 1/1000 einer Sekunde entspricht. |
| Versuche, eine Übereinstimmung zu erzielen | Die Anzahl der Elemente, die die Browser-Engine mit diesem CSS-Selektor abgleichen wollte. |
| Anzahl der Übereinstimmungen | Die Anzahl der Elemente, die die Browser-Engine mit diesem CSS-Selektor abgeglichen hat. |
| % der nicht übereinstimmenden Pfade bei langsamen Pfaden | Das Verhältnis der Elemente, die nicht mit diesem CSS-Selektor übereinstimmten, zu den Elementen, die mit der Browser-Engine abgeglichen werden sollten und für die die Browser-Engine weniger optimierten Code verwenden musste. |
| Selector | Der übereinstimmende CSS-Selektor. |
| CSS | Das CSS-Style-Sheet, das den CSS-Selektor enthält |
Wenn Sie fertig sind, öffnen Sie im Bereich Leistung die Einstellungen Erfassungseinstellungen und deaktivieren Sie check_box CSS-Selektorstatistiken aktivieren.
Statistiken zur CSS-Regelauswahl für mehrere Ereignisse ansehen
Wenn Sie aggregierte Statistiken der CSS-Regelselektoren ansehen möchten, die an mehreren Ereignissen vom Typ Stil neu berechnen beteiligt sind, kopieren Sie mehrere Selektorstatistiken-Tabellen wie folgt in eine Tabelle:
Zeichnen Sie einen Leistungs-Trace mit aktivierten Selektorstatistiken auf.
Klicken Sie auf das erste Ereignis vom Typ Stil neu berechnen, das Sie interessiert.
Öffnen Sie unten im Bereich Leistung den Tab Selektorstatistiken.
Klicken Sie mit der rechten Maustaste auf die Selektorstatistiktabelle und wählen Sie Tabelle kopieren aus.
Fügen Sie die Tabelle in eine Tabelle ein, z. B. Google Tabellen.
Wiederholen Sie die vorherigen Schritte mit den anderen Ereignissen vom Typ Stil neu berechnen, die Sie interessieren.
Wenn Sie fertig sind, öffnen Sie im Bereich Leistung die Einstellungen Erfassungseinstellungen und deaktivieren Sie check_box CSS-Selektorstatistiken aktivieren.
Statistiken zur Auswahl von CSS-Regeln für die vollständige Aufzeichnung ansehen
So rufen Sie zusammengefasste Statistiken der CSS-Regelauswahlen auf, die an der gesamten Leistungsaufzeichnung beteiligt sind:
Zeichnen Sie einen Leistungs-Trace mit aktivierten Selektorstatistiken auf.
Klicken Sie auf einen leeren Bereich des Flame-Diagramms, um die Auswahl eines Ereignisses aufzuheben, das ausgewählt werden kann.
Wählen Sie den gesamten Aufnahmebereich aus. Doppelklicken Sie dazu oben im Bereich Leistung auf das CPU-Diagramm.
Öffnen Sie unten im Bereich Leistung den Tab Selektorstatistiken. Oben sehen Sie eine neue Zeile mit Daten zu den Summen aller Selektoren.
Wenn Sie fertig sind, öffnen Sie im Bereich Leistung die Einstellungen Erfassungseinstellungen und deaktivieren Sie check_box CSS-Selektorstatistiken 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 die meiste Zeit in Anspruch nehmen, klicken Sie auf die Spaltenüberschrift Verstrichen (ms).
Um die Leistung Ihrer Webseite zu verbessern, konzentrieren Sie sich auf die CSS-Selektoren, die:
- Die Berechnung hat lange gedauert (hoher Wert für Verstrichen (ms)).
- Die Anzahl der Versuche des Browsers, Übereinstimmungen zu ermitteln (hoher Wert für Übereinstimmungsversuche)
- Der Browser hat viele Elemente nicht abgeglichen (niedriger Wert für Übereinstimmungsanzahl im Vergleich zum Wert für Übereinstimmungsversuche).
- Sie weisen einen hohen Prozentsatz an Nichtübereinstimmungen bei langsamen Pfaden auf.
Im vorherigen Screenshot ist beispielsweise Folgendes zu sehen:
- Der erste CSS-Selektor (
html body .ps[tooltip...) war am häufigsten erforderlich. - Die Browser-Engine hat 1.104 Mal versucht, diesen CSS-Selektor abzugleichen. Es wurden jedoch keine Elemente gefunden.
Daher ist dieser CSS-Selektor der erste zu verbessernde Versuch.
Versuchen Sie, Ihre CSS-Selektoren so zu ändern, dass sie weniger Zeit benötigen, um weniger Elemente auf der Seite zu berechnen und abzugleichen. Wie Sie Ihre CSS-Selektoren verbessern können, hängt vom jeweiligen Anwendungsfall ab.
Wiederholen Sie die Schritte in dieser Anleitung, um zu prüfen, ob Ihre Änderungen dazu beigetragen haben, die Dauer des Ereignisses Stil neu berechnen in der Spalte Verstrichen (ms) zu verringern.