Analysieren der CSS-Selektorleistung während der Neuberechnung von Formatvorlagenereignissen

Wenn ihre Webseite über zeitintensive Recalculate Style-Ereignisse verfügt, um zu ermitteln, welche Css-Selektoren die meiste Zeit in Anspruch nehmen und zu einer langsamen Leistung führen, verwenden Sie die Registerkarte Selector Stats im Leistungstool . Die Registerkarte Selector Stats enthält Statistiken zu den CSS-Regelselektoren, die an einem oder mehreren Neuberechnungsformatereignissen in einer Leistungsaufzeichnung beteiligt waren.

Das Leistungstool hebt jede zeitintensive Aufgabe mit einem roten Dreieck in der oberen rechten Ecke hervor, um die Arbeit am Standard Thread anzugeben, deren Ausführung sehr lange dauert und eine langsame Leistung aufweist:

In Ihren Leistungsaufzeichnungen können einige dieser Aufgaben mit langer Ausführungszeit Style-Ereignisse neu berechnen sein. Ein Recalculate Style-Ereignis verfolgt die Zeit nach, die der Browser benötigt, um die folgenden Schritte auszuführen:

• Durchlaufen Sie die DOM-Elemente auf einer Seite, um alle CSS-Stilregeln zu finden, die einem bestimmten Element entsprechen.
• Berechnen Sie den tatsächlichen Stil jedes Elements basierend auf den übereinstimmenden CSS-Stilregeln.

CSS-Formatvorlagen müssen immer dann neu berechnet werden, wenn sich die Anwendbarkeit von CSS-Regeln geändert hat, z. B.:

• Wenn Elemente dem DOM hinzugefügt oder daraus entfernt werden.
• Wenn die Attribute eines Elements geändert werden, z. B. der Wert eines - oder id -classAttributs.
• Wenn Benutzereingaben auftreten, z. B. eine Mausbewegung oder eine Änderung, welches Element auf einer Webseite den Fokus hat, kann sich auf Regeln auswirken :hover .

Aufzeichnen einer Leistungsablaufverfolgung mit aktivierter Auswahlstatistik

Um die Statistiken Ihrer CSS-Regelselektoren während zeitintensiver Recalculate Style-Ereignisse anzuzeigen, zeichnen Sie zunächst eine Leistungsablaufverfolgung mit aktiviertem Feature Selector Stats auf. Sie aktivieren das Feature Selector Stats, indem Sie das Kontrollkästchen CSS-Auswahlstatistik aktivieren aktivieren, in dem die Registerkarte Selector Stats angezeigt wird.

Das Feature Selector Stats ist nicht immer aktiviert, da es ihren Leistungsaufzeichnungen mehr Mehraufwand hinzufügt. Sie sollten es nur aktiviert lassen, wenn Sie die Leistung von Recalculate Style-Ereignissen und anderen Renderinginformationen untersuchen müssen.

So zeichnen Sie eine Leistungsablaufverfolgung mit Selektorstatistiken auf:

1. Öffnen Sie eine Webseite in einem neuen Fenster oder einer neuen Registerkarte, z. B. der Fotogalerie-Demoseite .

2. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Überprüfen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

3. Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte Leistung () aus. Wenn diese Registerkarte nicht angezeigt wird, wählen Sie Weitere Tools () >Leistung aus.

4. Klicken Sie im Leistungstool auf die Schaltfläche Einstellungen erfassen (").

5. Aktivieren Sie das Kontrollkästchen CSS-Auswahlstatistik aktivieren :

   

6. Klicken Sie auf die Schaltfläche Datensatz (), und führen Sie dann das Szenario aus, das Sie für Ihre Website oder App verbessern möchten.

7. Klicken Sie auf die Schaltfläche Beenden .

Zeigen Sie als Nächstes CSS-Selektorstatistiken an, wie in den folgenden Abschnitten beschrieben.

Anzeigen von CSS-Regelauswahlstatistiken für ein einzelnes Ereignis

So zeigen Sie die Statistiken der CSS-Regelselektoren an, die an einem einzelnen Recalculate Style-Ereignis beteiligt sind:

1. Führen Sie oben die Schritte unter Aufzeichnen einer Leistungsablaufverfolgung mit aktivierter Auswahlstatistik aus.

2. Suchen Sie in Ihrer Leistungsaufzeichnung nach einem Recalculate Style-Ereignis , und klicken Sie darauf.

3. Klicken Sie im unteren Abschnitt des Leistungstools auf die Registerkarte Selector Stats (Selector Stats ):

   

Tabelle der CSS-Selektoren auf der Registerkarte Selector Stats

Die Registerkarte Selector Stats im Leistungstool enthält eine Tabelle mit CSS-Selektoren. In der Tabelle werden die folgenden Informationen für jede CSS-Auswahl angezeigt:

Spalte	Beschreibung
Verstrichen (ms)	Die Zeitspanne, die der Browser für das Abgleichen dieses CSS-Selektors aufgewendet hat. Diese Zeit wird in Millisekunden (ms) angegeben, wobei 1 ms 1/1000 einer Sekunde entspricht.
Abgleichsversuche	Die Anzahl der Elemente, die die Browser-Engine mit diesem CSS-Selektor abzugleichen versucht hat.
Übereinstimmungsanzahl	Die Anzahl der Elemente, die die Browser-Engine mit diesem CSS-Selektor abgeglichen hat.
% der langsamen Pfade, die keine Übereinstimmungen aufweisen	Das Verhältnis von Elementen, die nicht mit diesem CSS-Selektor übereinstimmen, zu den Elementen, die die Browser-Engine abzugleichen versucht hat und für die die Browser-Engine weniger optimierten Code verwenden musste.
Selektor	Die CSS-Auswahl, die abgeglichen wurde.
Stylesheet	Das CSS-Stylesheet, das den CSS-Selektor enthält.

Wenn Sie fertig sind, klicken Sie im Leistungstool auf die Schaltfläche Einstellungen erfassen (), und deaktivieren Sie dann das Kontrollkästchen CSS-Auswahlstatistik aktivieren .

Anzeigen von CSS-Regelauswahlstatistiken für mehrere Ereignisse

Um aggregierte Statistiken der CSS-Regelselektoren anzuzeigen, die an mehreren Recalculate Style-Ereignissen beteiligt sind, kopieren Sie mehrere Selector Stats-Tabellen wie folgt in ein Arbeitsblatt:

1. Führen Sie oben die Schritte unter Aufzeichnen einer Leistungsablaufverfolgung mit aktivierter Auswahlstatistik aus.

2. Suchen Sie nach dem ersten Recalculate Style-Ereignis , an dem Sie interessiert sind, und klicken Sie dann darauf.

3. Klicken Sie im unteren Abschnitt des Leistungstools auf die Registerkarte Selector Stats ( Selector Stats ).

4. Klicken Sie mit der rechten Maustaste auf die Tabelle mit den Selektorstatistiken, und wählen Sie dann Tabelle kopieren aus:

   

5. Fügen Sie die Tabelle in ein Arbeitsblatt ein, z. B. Microsoft Excel.

6. Wiederholen Sie die vorherigen Schritte mit den anderen Formatvorlagen-Neuberechnungsereignissen, an denen Sie interessiert sind.

Wenn Sie fertig sind, klicken Sie im Leistungstool auf die Schaltfläche Einstellungen erfassen (), und deaktivieren Sie dann das Kontrollkästchen CSS-Auswahlstatistik aktivieren .

Anzeigen aggregierter CSS-Regelauswahlstatistiken für die vollständige Aufzeichnung

So zeigen Sie aggregierte Statistiken der CSS-Regelselektoren an, die an der gesamten Leistungsaufzeichnung beteiligt sind:

1. Führen Sie oben die Schritte unter Aufzeichnen einer Leistungsablaufverfolgung mit aktivierter Auswahlstatistik aus.

2. Heben Sie die Auswahl eines Ereignisses auf, das in der Leistungsaufzeichnung ausgewählt ist, indem Sie auf einen leeren Bereich des Flammendiagramms klicken.

3. Wählen Sie den gesamten Aufzeichnungsbereich aus. Doppelklicken Sie dazu oben im Leistungstool auf das CPU-Diagramm, oder zeigen Sie mit der Maus auf das Flammendiagramm, und scrollen Sie nach oben, bis das gesamte Diagramm angezeigt wird.

4. Klicken Sie im unteren Abschnitt des Leistungstools auf die Registerkarte Selector Stats (Selector Stats ):

   

Wenn Sie fertig sind, klicken Sie im Leistungstool auf die Schaltfläche Einstellungen erfassen (), und deaktivieren Sie dann das Kontrollkästchen CSS-Auswahlstatistik aktivieren .

Analysieren von CSS-Selektorstatistiken

Klicken Sie auf eine Spaltenüberschrift, um die in der Tabelle Selector Stats angezeigten Daten in aufsteigender oder absteigender Reihenfolge zu sortieren. Um beispielsweise zu sehen, 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 Verstrichener (ms) -Wert),
• und deren Übereinstimmung der Browser mehrmals versucht hat (hoher Wert für Übereinstimmungsversuche ),
• und die der Browser nicht wirklich mit vielen Elementen abglich (niedriger Wert für die Übereinstimmungsanzahl im Vergleich zum Vergleichsversuchswert ),
• und mit einem hohen Prozentsatz langsamer Pfade, die nicht übereinstimmen.

Beispiel: Im obigen Screenshot:

• Die erste CSS-Auswahl (.gallery .photo .meta ::selection) benötigte die meiste Zeit.
• Die Browser-Engine hat 6017 Mal versucht, diesen CSS-Selektor abzugleichen, aber nur 3234 Elemente.
• Von den 2783 Elementen, die nicht übereinstimmen, erforderten 78 % weniger optimierten Code, um abzugleichen.

Daher ist diese CSS-Auswahl ein guter Kandidat, um zu versuchen, zu verbessern.

Versuchen Sie, Ihre CSS-Selektoren so zu ändern, dass sie weniger Zeit zum Berechnen benötigen und weniger Elemente auf der Seite entsprechen. Wie Sie Ihre CSS-Selektoren verbessern, hängt von Ihrem speziellen Anwendungsfall ab. Wiederholen Sie die Schritte in den obigen Abschnitten "Datensatz" und "Ansicht", um zu bestätigen, dass ihre Änderungen dazu beigetragen haben, die Dauer des Ereignisses Neuberechnungsformat in der Spalte Verstrichen (ms) zu verringern.

Siehe auch

• Einführung in das Leistungstool : Eine Einführung in die Analyse der Laufzeitleistung in DevTools.
• Referenz zu Leistungsfeatures : Hier finden Sie viele der Features im Leistungstool .
• Blogbeitrag zur Wahrheit über die CSS-Selektorleistung – Windows.