JavaScript löst oft visuelle Änderungen aus. Manchmal liegt dies direkt an Stiländerungen, manchmal sind es aber auch Berechnungen, die zu visuellen Änderungen führen, z. B. beim Suchen oder Sortieren von Daten. JavaScript mit falscher Zeit oder langlebiger Ausführung kann eine häufige Ursache von Leistungsproblemen sein. Daher sollten Sie die Auswirkungen so weit wie möglich minimieren.
Wenn Sie das DOM ändern, z. B. durch Hinzufügen und Entfernen von Elementen, Ändern von Attributen, Klassen oder durch Animation, führt dies alles dazu, dass der Browser die Elementstile und häufig das Layout der Seite oder Teile davon neu berechnet. Dieser Vorgang wird als berechnete Stilberechnung bezeichnet.
Der erste Teil von Computing-Stilen besteht darin, einen Satz übereinstimmender Selektoren zu erstellen. Dies dient im Wesentlichen dem Browser, um herauszufinden, welche Klassen, Pseudo-Selektoren und IDs für ein bestimmtes Element gelten.
Der zweite Teil des Prozesses besteht darin, alle Stilregeln von den übereinstimmenden Selektoren zu übernehmen und herauszufinden, welche endgültigen Stile das Element hat.
Zusammenfassung
- Wie eine Reduzierung der Kosten für die Stilberechnung zu einer geringeren Interaktionslatenz führen kann
- Vereinfachen Sie die Auswahl der Elemente, indem Sie eine klassenorientierte Methode (z. B. BEM) verwenden.
- Reduzieren Sie die Anzahl der Elemente, für die eine Stilberechnung berechnet werden muss.
Neuberechnungszeit und Interaktionslatenz von Stilen
Interaction to Next Paint (INP) ist ein nutzerorientierter Messwert für die Laufzeitleistung, mit dem bewertet wird, wie schnell eine Seite insgesamt auf Nutzereingaben reagiert. Wenn die Interaktionslatenz anhand dieses Messwerts bewertet wird, wird die Zeit von der Interaktion des Nutzers mit der Seite bis zur Darstellung des nächsten Frames durch den Browser mit den entsprechenden visuellen Aktualisierungen der Benutzeroberfläche gemessen.
Ein wesentlicher Bestandteil einer Interaktion ist die Zeit, die für das Rendern des nächsten Frames benötigt wird. Das Rendering der Darstellung des nächsten Frames besteht aus vielen Teilen, einschließlich der Berechnung von Seitenstilen, die direkt vor dem Layout, der Farbgebung und der Zusammensetzung auftreten. Dieser Artikel konzentriert sich zwar ausschließlich auf die Kosten für Stilberechnungen, es ist jedoch wichtig zu betonen, dass das Reduzieren eines interaktionsbezogenen Teils der Renderingphase die Gesamtlatenz reduziert – einschließlich der Stilberechnung.
Auswahl vereinfachen
Im einfachsten Fall können Sie auf ein Element in Ihrem CSS nur mit einer Klasse verweisen:
.title {
/* styles */
}
Wenn jedoch jedes Projekt wächst, wird es wahrscheinlich zu komplexeren CSS-Code führen, sodass Selektoren am Ende möglicherweise wie folgt aussehen:
.box:nth-last-child(-n+1) .title {
/* styles */
}
Um zu verstehen, wie diese Stile auf die Seite angewendet werden, muss der Browser faktisch fragen: „Ist dies ein Element der Klasse title, das ein übergeordnetes Element hat, das zufällig das minus n-te untergeordnete Element und ein Element mit der Klasse box ist?“ Diese Frage kann je nach verwendetem Selector und Browser viel Zeit in Anspruch nehmen. Das gewünschte Verhalten der Auswahl könnte stattdessen in eine Klasse geändert werden:
.final-box-title {
/* styles */
}
Sie können sich mit dem Namen des Kurses auseinandersetzen, aber der Job ist für den Browser jetzt viel einfacher geworden. Um in der vorherigen Version beispielsweise zu wissen, dass das Element das letzte seines Typs ist, muss der Browser zuerst alles über alle anderen Elemente wissen und wissen, ob es sich um weitere Elemente handelt, die darauf folgen. Das wäre nth-last-child, was potenziell teurer ist, als einfach den Selektor dem Element zuzuordnen, weil seine Klasse übereinstimmt.
Reduzieren Sie die Anzahl der Elemente, für die ein Stil festgelegt wird
Ein weiterer Leistungsbedenken, der in der Regel der vorrangige Faktor für viele Stiländerungen ist, ist der Arbeitsaufwand, der bei einer Änderung eines Elements durchgeführt werden muss.
Allgemein gilt: Die Kosten für die Berechnung des berechneten Stils von Elementen im schlimmsten Fall sind die Anzahl der Elemente multipliziert mit der Anzahl der Elemente, da jedes Element mindestens einmal mit jedem Stil verglichen werden muss, um festzustellen, ob es übereinstimmt.
Stilberechnungen können oft direkt auf einige Elemente ausgerichtet werden, anstatt die gesamte Seite zu entwerten. Bei modernen Browsern ist dies in der Regel weniger problematisch, da der Browser nicht unbedingt alle Elemente überprüfen muss, die möglicherweise von einer Änderung betroffen sind. Ältere Browser sind dagegen nicht unbedingt so optimiert. Wenn möglich, sollten Sie die Anzahl der ungültigen Elemente reduzieren.
Kosten für die Stilneuberechnung messen
Eine Möglichkeit, die Kosten für Stilneuberechnungen zu messen, ist der Leistungsbereich in den Chrome-Entwicklertools. Öffnen Sie zuerst die Entwicklertools, rufen Sie den Tab Leistung auf, wählen Sie „Aufnehmen“ aus und interagieren Sie mit der Seite. Wenn Sie die Aufzeichnung beenden, sehen Sie in etwa Folgendes:
Der Streifen oben ist ein Mini-Flamendiagramm, das auch Bilder pro Sekunde darstellt. Je näher sich die Aktivität am unteren Rand des Streifens befindet, desto schneller werden die Frames vom Browser dargestellt. Wenn sich das Flammendiagramm oben mit roten Streifen oben ausgleicht, haben Sie Arbeit, die lange laufende Frames verursacht.
Wenn Sie während einer Interaktion wie Scrollen einen langen Frame haben, muss dieser genauer geprüft werden. Wenn Sie einen großen lila Block haben, zoomen Sie auf die Aktivität und wählen Sie alle Arbeiten mit der Bezeichnung Stil neu berechnen aus, um weitere Informationen zu potenziell teuren Stilneuberechnungen zu erhalten.
In diesem Beispiel dauert eine lang andauernde Neuberechnung von Stilen etwas mehr als 25 ms.
Wenn Sie auf das Ereignis selbst klicken, erhalten Sie einen Aufrufstack. Wenn das Rendering auf eine Nutzerinteraktion zurückzuführen ist, wird die Stelle in Ihrem JavaScript aufgerufen, die für das Auslösen der Stiländerung verantwortlich ist. Darüber hinaus wird auch die Anzahl der Elemente angezeigt, die von der Änderung betroffen waren – in diesem Fall etwas mehr als 900 – und wie lange die Stilberechnung gedauert hat. Anhand dieser Informationen können Sie versuchen, eine Fehlerbehebung in Ihrem Code zu finden.
Block, Element, Modifikator verwenden
Bei Programmierungskonzepten wie BEM (Block, Element, Modifier) werden die oben erwähnten Leistungsvorteile für den Selektor-Abgleich berücksichtigt, da empfohlen wird, dass alles eine einzelne Klasse hat und, wenn Sie eine Hierarchie benötigen, auch diese in den Namen der Klasse verankert wird:
.list {
/* Styles */
}
.list__list-item {
/* Styles */
}
Wenn Sie einen Modifikator benötigen, wie im obigen Beispiel, wo wir etwas Besonderes für das letzte untergeordnete Element machen möchten, können Sie das wie folgt hinzufügen:
.list__list-item--last-child {
/* Styles */
}
Wenn Sie nach einer guten Möglichkeit suchen, Ihr CSS zu organisieren, ist BEM ein guter Ausgangspunkt, sowohl aus struktureller Sicht als auch aufgrund der vereinfachten Stilsuche, die von der Methodik unterstützt wird.
Wenn Ihnen BEM nicht gefällt, gibt es andere Möglichkeiten, Ihr Preisvergleichsportal anzugehen. Allerdings sollten Sie die Leistung und die Ergonomie des Ansatzes abwägen.
Ressourcen
Hero-Image aus Unsplash von Markus Spiske