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 die endgültigen Stile des Elements ermittelt.
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, 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 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 Allgemeinen sind die Kosten für die Berechnung des berechneten Elementstiles im Worst-Case-Szenario die 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 dazu 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.
- Interagiere mit der Seite.
Wenn Sie die Aufzeichnung beenden, sehen Sie in etwa Folgendes: