Umfang und Komplexität von Stilberechnungen reduzieren

Jeremy Wagner

Paul Lewis

JavaScript ist oft ein Auslöser für visuelle Änderungen. Manchmal werden diese durch Stiländerungen und manchmal durch Berechnungen die visuelle Veränderungen bewirken, wie z. B. Suchen oder Sortieren von Daten. Falsches Timing oder JavaScript mit langer Ausführungszeit eine häufige Ursache für Leistungsprobleme sein. die Auswirkungen möglichst gering zu halten.

Stilberechnung

Ändern des DOMs durch Hinzufügen und Entfernen von Elementen, Ändern von Attributen, Klassen, oder das Abspielen von Animationen berechnet der Browser die Elementstile und in vielen Fällen das Layout eines Teils oder der gesamten Seite. Dieser Prozess wird als Stilberechnung

Der Browser beginnt mit der Berechnung von Stilen, indem er eine Reihe übereinstimmender Selektoren erstellt, bestimmen, welche Klassen, Pseudoselektoren und IDs für ein bestimmtes Element gelten. Anschließend verarbeitet es die Stilregeln aus den übereinstimmenden Selektoren und berechnet, welche endgültigen Stile das Element hat.

Die Rolle der Stilneuberechnung bei der Interaktionslatenz

Interaction to Next Paint (INP) ist eine nutzerorientierte Laufzeit. Leistungsmesswert, mit dem bewertet wird, wie schnell eine Seite insgesamt auf Nutzereingaben reagiert. Er misst die Interaktionslatenz von der Interaktion des Nutzers mit der Seite bis zur zeichnet der Browser den nächsten Frame mit den entsprechenden visuellen Aktualisierungen auf der Benutzeroberfläche.

Eine wichtige Komponente einer Interaktion ist die Zeit, die benötigt wird, um die nächste Frame. Das Rendering der Präsentation des nächsten Frames besteht aus vielen Teilen. einschließlich der Berechnung von Seitenstilen, die direkt vor Layout, Paint und und Compositing-Arbeit. Dieses Handbuch konzentriert sich auf die Kosten für die Stilberechnung, verringert sich auch die gesamte Rendering-Dauer der Interaktion. Latenz.

Reduzieren Sie die Komplexität Ihrer Selektoren

Durch die Vereinfachung von CSS-Selektoren können die Stilberechnungen Ihrer Seite beschleunigt werden. Die einfachsten Selektoren verweisen auf ein Element in CSS und nur über einen Klassennamen:

.title {
  /* styles */
}

Aber wenn jedes Projekt wächst, benötigt es wahrscheinlich komplexere CSS-Ressourcen, und Sie könnten mit Selektoren wie diese:

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

Um zu bestimmen, wie diese Stile auf die Seite angewendet werden, muss der Browser Frage "Ist dies ein Element der Klasse title mit einem übergeordneten Element der Klasse box, die das untergeordnete Element seines übergeordneten Elements ist? Das herausfinden kann es einige Zeit dauern, bis der Browser aktiviert ist. Um dies zu vereinfachen, können Sie Selektor festlegen, um einen spezifischeren Klassennamen zu machen:

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

Diese Ersatzklassennamen mögen unangenehm erscheinen, aber sie machen die viel einfacher zu machen. In der vorherigen Version konnte der Browser beispielsweise ein Element das letzte seines Typs ist, muss es zunächst alles über alle Elemente, um zu bestimmen, ob weitere Elemente, nth-last-child sein. Das kann viel rechenintensiver sein als Abgleich eines Selectors mit einem Element allein aufgrund seines Klassennamens.

Reduzieren Sie die Anzahl der Elemente, für die Stile festgelegt werden.

Ein weiterer Aspekt für die Leistung, der oft wichtiger ist als die Auswahl Komplexität – der Aufwand, der erledigt werden muss, wenn sich ein Element ändert.

Im Allgemeinen sind die Kosten für den schlimmsten Fall bei der Berechnung des Stils der berechneten Elemente. ist die Anzahl der Elemente multipliziert mit der Anzahl der Selektoren, da der Browser jedes Element mindestens einmal mit jedem Stil vergleichen, um zu sehen, Übereinstimmungen.

Stilberechnungen können direkt auf einige Elemente ausgerichtet werden, anstatt sie zu entwerten für die gesamte Seite. In modernen Browsern ist dies weniger problematisch, denn Der Browser muss nicht immer alle Elemente überprüfen, auf die sich eine Änderung auswirken kann. Ältere Browser hingegen sind nicht immer für solche Aufgaben optimiert. Wo? können Sie die Anzahl der entwerteten Elemente reduzieren.

Kosten für die Neuberechnung von Stilen messen

Es gibt mehrere Möglichkeiten, die Kosten der Stil-Neuberechnung im Browser. Jede davon hängt davon ab, ob sie im Browser gemessen werden soll. oder wenn Sie messen möchten, wie lange dieser Prozess dauert, für echte Nutzende auf Ihrer Website.

Kosten für die Neuberechnung von Stilen in den Chrome-Entwicklertools messen

Eine Möglichkeit, die Kosten für Neuberechnungen von Stilen zu messen, besteht darin, in den Chrome-Entwicklertools. Gehen Sie dazu 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 das folgende Bild:

</ph>

Der Streifen oben ist ein Mini-Flammendiagramm, das auch Frames pro 2. Je näher die Aktivität am unteren Rand des Streifens ist, desto schneller Frames werden vom Browser gezeichnet. Wenn sich das Flame-Diagramm mit roten Balken darüber, gibt es Arbeit, die den länger andauernden Frames.

</ph>

Lang andauernde Frames während einer Interaktion wie Scrollen sind etwas näher gekommen. sehen. Wenn Sie einen großen lila Block sehen, zoomen Sie die Aktivität heran und wählen Sie mit der Bezeichnung Stil neu berechnen, um weitere Informationen kostspielige Neuberechnung von Stilen.

</ph>

Wenn Sie auf das Ereignis klicken, wird der zugehörige Aufrufstack angezeigt. Wenn das Rendering durch eine wird der JavaScript-Code aufgerufen, der die Stiländerung ausgelöst hat. Es zeigt auch die Anzahl der Elemente, auf die sich die Änderung auswirkt – etwas mehr als 900 Elemente in diesem Fall – und wie lange die Stilberechnung gedauert hat. Sie können diese um eine Lösung in Ihrem Code zu finden.

Wenn Sie das Kästchen Selektorstatistiken angeklickt haben in den Einstellungen des Steuerfelds für Leistung, bevor Sie einen Trace erstellen. im Trace einen zusätzlichen Tab mit demselben Namen.

</ph> <ph type="x-smartling-placeholder">

Dieses Steuerfeld enthält nützliche Daten zu den relativen Kosten jeder Auswahl, sodass Sie um teure CSS-Selektoren zu identifizieren.

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

Kosten für die Neuberechnung von Stilen für echte Nutzer messen

Wenn Sie wissen möchten, wie lange es dauert, echte Nutzer Ihrer Website können Sie mithilfe der Long Animation Frames API gibt Ihnen die dafür notwendigen Tools. Daten aus dieser API wurden hinzugefügt web-vitals-JavaScript-Bibliothek, einschließlich der Zeit für die Neuberechnung von Stilen.

Wenn Sie vermuten, dass die Verzögerung einer Interaktion zum INP-Wert einer Seite beitragen, möchten Sie herausfinden, Stile auf der Seite neu berechnet werden müssen. Weitere Informationen finden Sie in den Wie Sie die Zeit für die Neuberechnung von Stilen in einem Feld messen

Ressourcen

• Selektorstatistiken in den Chrome-Entwicklertools
• Entwertung des Stils in Blink
• Interaction to Next Paint (INP)
• Die JavaScript-Bibliothek von web-vitals
• Zeit für die Neuberechnung von Stilen vor Ort messen

Hero-Image von Unsplash von Markus Spiske