JavaScript ist oft ein Auslöser für visuelle Änderungen. Manchmal werden diese Änderungen direkt durch Stilmanipulationen und manchmal durch Berechnungen vorgenommen, die zu visuellen Änderungen führen, z. B. durch die Suche oder Sortierung von Daten. Ungünstig getimmtes oder langlaufendes JavaScript kann eine häufige Ursache für Leistungsprobleme sein. Sie sollten daher versuchen, die Auswirkungen so gering wie möglich zu 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 Laufzeit-Leistungsmesswert, mit dem die Reaktionszeit einer Seite auf Nutzereingaben insgesamt bewertet wird. Sie misst die Interaktionslatenz, also 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 verringert.
Komplexität von Auswahlelementen reduzieren
Wenn Sie CSS-Selektoren vereinfachen, 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 etwas unhandlich erscheinen, aber sie erleichtern die Arbeit des Browsers erheblich. 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. Das kann wesentlich rechenintensiver sein als die Zuordnung einer Auswahl zu einem Element nur auf der Grundlage 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 schlimmsten Fall entspricht 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 problematisch, 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. Welche Sie verwenden, hängt davon ab, ob Sie die Messung im Browser in Ihrer Entwicklungsumgebung oder die Dauer des Vorgangs für echte Nutzer auf Ihrer Website messen möchten.
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:
- Öffnen Sie die Entwicklertools.
- Rufen Sie den Tab Leistung auf.
- Setzen Sie ein Häkchen in das Kästchen Statistiken für Auswahl (optional).
- Klicken Sie auf Aufzeichnen.
- Interagieren Sie mit der Seite.
Wenn Sie die Aufnahme beenden, sehen Sie in etwa Folgendes:
Der Streifen oben ist ein Miniatur-Flame-Diagramm, in dem auch Frames pro Sekunde dargestellt werden. Je näher die Aktivität am unteren Ende des Balkens ist, desto schneller werden Frames vom Browser gerendert. Wenn sich das Flammendiagramm oben mit roten Balken darüber einpendelt, gibt es einen Arbeitsschritt, der zu lang laufenden Frames führt.
Langlaufende Frames während einer Interaktion wie dem Scrollen sollten genauer betrachtet werden. Wenn Sie einen großen lilafarbenen 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.
Wenn Sie auf das Ereignis klicken, wird der Aufrufstack angezeigt. Wenn das Rendern durch eine Nutzerinteraktion verursacht wurde, wird das JavaScript aufgerufen, das 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 in den Einstellungen des Steuerfelds 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.
In diesem Bereich finden Sie nützliche Daten zu den relativen Kosten der einzelnen Selektoren, mit denen Sie kostspielige 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 Sie wissen möchten, wie lange es dauert, bis die Stile für echte Nutzer Ihrer Website neu berechnet werden, bietet die Long Animation Frames API die entsprechenden Tools. Daten aus dieser API wurden der web-vitals JavaScript-Bibliothek hinzugefügt, einschließlich der Zeit für die Stilneuberechnung.
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.