JavaScript ist oft der Auslöser für visuelle Änderungen. Manchmal werden diese Änderungen direkt durch Stilmanipulationen vorgenommen, manchmal durch Berechnungen, die zu visuellen Änderungen führen, z. B. beim Suchen oder Sortieren von Daten. Schlecht getimtes oder lang andauerndes JavaScript kann eine häufige Ursache für Leistungsprobleme sein. Sie sollten versuchen, die Auswirkungen zu minimieren.
Stilberechnung
Wenn Sie das DOM ändern, indem Sie Elemente hinzufügen oder entfernen, Attribute oder Klassen ändern oder Animationen abspielen, muss der Browser die Elementstile und in vielen Fällen das Layout eines Teils oder der gesamten Seite neu berechnen. Dieser Vorgang wird als Stilberechnung bezeichnet.
Der Browser beginnt mit der Berechnung von Stilen, indem er eine Reihe von passenden Selektoren erstellt, um zu ermitteln, welche Klassen, Pseudoselektoren und IDs für ein bestimmtes Element gelten. Anschließend werden die Stilregeln der übereinstimmenden Selektoren 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, der die Reaktionsfähigkeit einer Seite auf Nutzereingaben insgesamt bewertet. Sie misst die Interaktionslatenz, d. h. die Zeit, die vergeht, bis der Browser den nächsten Frame rendert, der die entsprechenden visuellen Updates der Benutzeroberfläche für den Nutzer anzeigt.
Ein wichtiger Bestandteil einer Interaktion ist die Zeit, die zum Rendern des nächsten Frames benötigt wird. Das Rendern des nächsten Frames besteht aus vielen Teilen, darunter die Berechnung von Seitenstilen, die kurz vor dem Layout, dem Rendern und dem Compositing erfolgt. In diesem Leitfaden geht es hauptsächlich um die Kosten für die Stilberechnung. Wenn Sie jedoch die gesamte Renderingdauer einer Interaktion verkürzen, wird auch die Gesamtlatenz reduziert.
Komplexität der Selektoren 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 */
}
Mit zunehmender Größe eines Projekts ist jedoch wahrscheinlich komplexeres CSS erforderlich und Sie erhalten möglicherweise Selektoren wie diesen:
.box:nth-last-child(-n+1) .title {
/* styles */
}
Um festzustellen, wie diese Formatierungen auf die Seite angewendet werden, muss der Browser im Grunde fragen: „Ist das ein Element mit der Klasse title, dessen übergeordnetes Element die Klasse box hat und das das minus-nte-plus-1-te untergeordnete Element seines übergeordneten Elements ist? Es kann einige Zeit dauern, bis der Browser das herausgefunden hat. Um dies zu vereinfachen, können Sie den Selektor in einen spezifischeren Klassennamen ändern:
.final-box-title {
/* styles */
}
Diese Ersatzklassennamen mögen umständlich erscheinen, aber sie erleichtern die Arbeit des Browsers erheblich. In der vorherigen Version musste der Browser beispielsweise erst alles über alle anderen Elemente wissen, um festzustellen, ob ein Element das letzte seines Typs ist.nth-last-child Das kann viel rechenintensiver sein, als einen Selektor nur anhand des Klassennamens mit einem Element abzugleichen.
Anzahl der zu formatierenden Elemente reduzieren
Ein weiterer Leistungsaspekt, der oft wichtiger ist als die Komplexität von Selektoren, ist der Aufwand, der erforderlich ist, wenn sich ein Element ändert.
Im Allgemeinen sind die Worst-Case-Kosten für die Berechnung des Stils der berechneten Elemente die Anzahl der Elemente multipliziert mit der Anzahl der Selektoren, da der Browser jedes Element mindestens einmal mit jedem Stil abgleichen muss, um festzustellen, ob es übereinstimmt.
Stilberechnungen können direkt auf einige Elemente ausgerichtet werden, anstatt die gesamte Seite zu ungültig zu machen. In modernen Browsern ist das in der Regel weniger problematisch, da der Browser nicht immer alle Elemente prüfen muss, die von einer Änderung betroffen sein könnten. Ältere Browser sind dagegen nicht immer für solche Aufgaben optimiert. Reduzieren 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 Neuberechnung von Stilen im Browser zu messen. Die jeweilige Methode hängt davon ab, ob Sie die Zeit im Browser in Ihrer Entwicklungsumgebung oder für echte Nutzer auf Ihrer Website messen möchten.
Kosten für die Neuberechnung von Stilen in den Chrome-Entwicklertools messen
Eine Möglichkeit, die Kosten für die Neuberechnung von Stilen zu messen, ist die Verwendung des Leistungsbereichs in den Chrome-Entwicklertools. So legen Sie los:
- Öffnen Sie die Entwicklertools.
- Rufen Sie den Tab Leistung auf.
- Setzen Sie optional ein Häkchen bei Selector stats (Statistiken für Selektoren).
- Klicken Sie auf Aufzeichnen.
- Interagiere mit der Seite.
Wenn Sie die Aufnahme beenden, sehen Sie ein Bild wie das folgende:
Der Streifen oben ist ein Miniatur-Flame-Diagramm, in dem auch die Frames pro Sekunde dargestellt werden. Je näher die Aktivität am unteren Rand des Streifens liegt, desto schneller werden Frames vom Browser gerendert. Wenn das Flame-Diagramm oben abflacht und rote Balken darüber zu sehen sind, gibt es Vorgänge, die zu Frames mit langer Ausführungszeit führen.
Lang andauernde Frames während einer Interaktion wie dem Scrollen sollten genauer untersucht werden. Wenn Sie einen großen lila Block sehen, zoomen Sie die Aktivität heran und wählen Sie eine Aufgabe mit dem Label Recalculate Style (Stil neu berechnen) aus, um weitere Informationen zu potenziell aufwendigen Aufgaben zur Neuberechnung des Stils zu erhalten.
Wenn Sie auf das Ereignis klicken, wird der zugehörige Aufrufstack angezeigt. Wenn die Rendering-Arbeit durch eine Nutzerinteraktion verursacht wurde, wird das JavaScript angegeben, 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 – und wie lange die Stilberechnung gedauert hat. Anhand dieser Informationen können Sie versuchen, eine Lösung für das Problem in Ihrem Code zu finden.
Wenn Sie vor dem Ausführen eines Traces in den Einstellungen des Leistungsbereichs das Kästchen Selector-Statistiken angeklickt haben, enthält der untere Bereich des Traces einen zusätzlichen Tab mit demselben Namen.
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-Selektorstatistiken.
Kosten für die Neuberechnung von Stil für echte Nutzer messen
Wenn Sie wissen möchten, wie lange die Neuberechnung von Formatierungen für echte Nutzer Ihrer Website dauert, können Sie die Long Animation Frames API verwenden. Daten aus dieser API wurden der JavaScript-Bibliothek web-vitals hinzugefügt, einschließlich der Zeit für die Neuberechnung von Formatierungen.
Wenn Sie vermuten, dass die Verzögerung bei der Darstellung einer Interaktion der Hauptgrund für den INP einer Seite ist, sollten Sie herausfinden, wie viel Zeit für die Neuberechnung von Stilen auf der Seite aufgewendet wird. Weitere Informationen zum Messen der Zeit für die Neuberechnung von Stilen im Feld