Umfang und Komplexität von Stilberechnungen reduzieren

JavaScript ist oft ein Auslöser für visuelle Änderungen. Manchmal werden diese Änderungen direkt durch Stiländerungen vorgenommen und manchmal durch Berechnungen, die visuelle Änderungen zur Folge haben, z. B. durch Suchen oder Sortieren von Daten. JavaScript-Code mit falscher zeitlicher oder langer Ausführungszeit kann eine häufige Ursache für Leistungsprobleme sein. Daher solltest du die Auswirkungen möglichst gering halten.

Stilberechnung

Wenn Sie das DOM ändern, indem Sie Elemente hinzufügen und entfernen, Attribute ändern, Klassen ändern oder Animationen abspielen, berechnet der Browser die Elementstilen und in vielen Fällen das Layout eines Teils oder der gesamten Seite neu. Dieser Vorgang wird als Stilberechnung bezeichnet.

Der Browser beginnt mit der Berechnung von Stilen, indem er eine Reihe von übereinstimmenden Selektoren erstellt, um zu ermitteln, welche Klassen, Pseudoselektoren und IDs auf ein bestimmtes Element zutreffen. Anschließend werden die Stilregeln aus den übereinstimmenden Auswahlen verarbeitet und es wird ermittelt, welche endgültigen Stile das Element hat.

Die Rolle der Stilneuberechnung bei der Interaktionslatenz

Interaction to Next Paint (INP) ist ein nutzerorientierter Messwert für die Laufzeitleistung, mit dem bewertet wird, wie schnell eine Seite auf Nutzereingaben reagiert. Sie misst die Interaktionslatenz, d. h. die Zeitspanne zwischen der Nutzerinteraktion mit der Seite und dem Rendern des nächsten Frames durch den Browser, in dem die entsprechenden visuellen Updates der Benutzeroberfläche zu sehen sind.

Ein wichtiger Bestandteil einer Interaktion ist die Zeit, die für das Zeichnen des nächsten Frames benötigt wird. Das Rendering für die Darstellung des nächsten Frames besteht aus vielen Teilen, einschließlich der Berechnung von Seitenstilen, die kurz vor dem Layout, dem Malen und dem Compositing erfolgen. In diesem Leitfaden liegt der Schwerpunkt auf den Kosten für die Stilberechnung. Wenn Sie jedoch einen Teil der Gesamtdauer der Interaktion reduzieren, wird auch die Gesamtlatenz reduziert.

Komplexität von Auswahlelementen reduzieren

Durch die Vereinfachung von CSS-Selektoren können Sie die Stilberechnungen Ihrer Seite beschleunigen. Die einfachsten Selektoren verweisen in CSS nur mit einem Klassennamen auf ein Element:

.title {
  /* styles */
}

Wenn ein Projekt jedoch wächst, ist wahrscheinlich komplexeres CSS erforderlich. Sie könnten dann Selektoren wie diese haben:

.box:nth-last-child(-n+1) .title {
  /* styles */
}

Um zu ermitteln, wie diese Stile auf die Seite angewendet werden, muss der Browser effektiv fragen: „Ist dies ein Element mit der Klasse title mit einem übergeordneten Element der Klasse box, das das minus-n-ste-plus-1-Kind seines übergeordneten Elements ist?“ Das kann einige Zeit dauern. Zur Vereinfachung können Sie den Selector in einen spezifischeren Klassennamen ändern:

.final-box-title {
  /* styles */
}

Diese Ersatzklassennamen mögen unangenehm erscheinen, machen aber die Arbeit des Browsers erheblich einfacher. In der vorherigen Version musste der Browser beispielsweise zuerst alles über alle anderen Elemente wissen, um zu bestimmen, ob es nach dem Element noch weitere Elemente gibt, die die nth-last-child sein könnten. Dies kann viel rechenintensiver sein als der Abgleich eines Selektors mit einem Element nur auf Basis seines Klassennamens.

Anzahl der zu stilisierenden Elemente reduzieren

Ein weiterer Leistungsaspekt, der oft wichtiger ist als die Komplexität der Auswahl, ist der Arbeitsaufwand, der bei einer Änderung eines Elements erforderlich ist.

Im Allgemeinen entspricht der Worst-Case-Wert für die Berechnung des berechneten Elementstils der Anzahl der Elemente multipliziert mit der Anzahl der Auswahlen, da der Browser jedes Element mindestens einmal mit jedem Stil vergleichen muss, um festzustellen, ob es übereinstimmt.

Stilberechnungen können direkt auf einige Elemente ausgerichtet werden, anstatt die gesamte Seite ungültig zu machen. In modernen Browsern ist das in der Regel weniger ein Problem, da der Browser nicht immer alle Elemente prüfen muss, auf die sich eine Änderung auswirken könnte. Ältere Browser sind dagegen nicht immer für solche Aufgaben optimiert. Verringern Sie nach Möglichkeit die Anzahl der ungültigen Elemente.

Kosten für die Stilneuberechnung messen

Es gibt verschiedene Möglichkeiten, die Kosten für die Stilneuberechnung im Browser zu messen. Jede davon hängt davon ab, ob Sie den Vorgang im Browser in Ihrer Entwicklungsumgebung messen möchten oder ob Sie messen möchten, wie lange dieser Prozess für echte Nutzer auf Ihrer Website dauert.

Kosten für die Stilneuberechnung in den Chrome-Entwicklertools messen

Eine Möglichkeit, die Kosten für Stilneuberechnungen zu messen, ist der Bereich „Leistung“ in den Chrome-Entwicklertools. Gehen Sie so vor:

  1. Öffnen Sie die Entwicklertools.
  2. Rufen Sie den Tab Leistung auf.
  3. Klicken Sie das Kästchen Selektorstatistiken an (optional).
  4. Klicken Sie auf Aufzeichnen.
  5. Interagieren Sie mit der Seite.

Wenn Sie die Aufnahme beenden, sehen Sie in etwa Folgendes:

Entwicklertools mit Stilberechnungen
Ein DevTools-Bericht mit Stilberechnungen

Der Streifen oben ist ein Miniatur-Flame-Diagramm, in dem auch Frames pro Sekunde dargestellt werden. Je näher sich die Aktivität am unteren Rand des Streifens befindet, desto schneller werden die Frames vom Browser gezeichnet. Wenn Sie sehen, dass das Flame-Diagramm oben mit roten Balken über dem Diagramm angeglichen wird, haben Sie Arbeit, die lange laufende Frames verursacht.

In den Chrome-Entwicklertools in der Aktivitätsübersicht des ausgefüllten Leistungsbereichs heranzoomen
Lang andauernde Frames in der DevTools-Aktivitätsübersicht

Langlaufende Frames während einer Interaktion wie dem Scrollen sollten genauer betrachtet werden. Wenn Sie einen großen lila Block sehen, zoomen Sie heran und wählen Sie eine Arbeit mit der Bezeichnung Stil neu berechnen aus, um weitere Informationen zu potenziell kostenintensiven Stilberechnungen zu erhalten.

Details zu langwierigen Stilberechnungen abrufen, einschließlich wichtiger Informationen wie der Anzahl der Elemente, die von der Stilneuberechnung betroffen sind.
Eine langwierige Stilüberprüfung, die in der DevTools-Zusammenfassung nur etwas über 25 Millisekunden dauert.

Wenn Sie auf das Ereignis klicken, wird der Aufrufstack angezeigt. Wenn das Rendering durch eine Nutzerinteraktion ausgelöst wurde, wird der JavaScript-Code aufgerufen, der die Stiländerung ausgelöst hat. Außerdem wird die Anzahl der Elemente angezeigt, auf die sich die Änderung auswirkt – in diesem Fall etwas mehr als 900 Elemente – und wie lange die Stilberechnung gedauert hat. Anhand dieser Informationen können Sie versuchen, eine Lösung für Ihr Problem zu finden.

Wenn Sie vor dem Erstellen eines Tracings im Steuerfeld für die Leistung das Kästchen Statistiken für Auswahl angeklickt haben, enthält das untere Steuerfeld im Tracing einen zusätzlichen Tab mit demselben Namen.

Die Tabelle mit den CSS-Auswahlstatistiken, wie sie im Bereich „Leistung“ der Chrome-Entwicklertools angezeigt wird. Diese Tabelle enthält Überschriften und entsprechende Daten wie verstrichene Zeit, Abgleichversuche, Abgleichszahl, Prozentsatz der nicht übereinstimmenden Knoten, Auswählten und das Stylesheet, in dem sie zu finden sind.
Die Tabelle mit den Auswahlstatistiken, die im Bereich „Leistung“ der Chrome-Entwicklertools angezeigt wird.

In diesem Bereich finden Sie nützliche Daten zu den relativen Kosten der einzelnen Selektoren, sodass Sie teure CSS-Selektoren identifizieren können.

Weitere Informationen finden Sie in der Dokumentation zu CSS-Selektoren.

Kosten für die Stilneuberechnung für echte Nutzer messen

Wenn du wissen möchtest, wie lange es dauert, bis der Stil bei echten Nutzern deiner Website neu berechnet wird, bietet dir die Long Animation Frames API die dafür erforderlichen Tools. Daten aus dieser API wurden der web-vitals-JavaScript-Bibliothek hinzugefügt, einschließlich der Zeit für die Neuberechnung von Stilen.

Wenn Sie vermuten, dass die Präsentationsverzögerung einer Interaktion der Hauptgrund für die INP einer Seite ist, sollten Sie herausfinden, wie viel Zeit für das Neuberechnen der Stile auf der Seite aufgewendet wird. Weitere Informationen finden Sie unter Zeit für die Stilneuberechnung im Feld messen.

Ressourcen