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 Berechnete 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.

Hinweis: Etwa die Hälfte der Zeit, die in Blink, dem Rendering-Modul, Chromium und abgeleitete Browser), um den berechneten Stil eines Elements zu berechnen, ist die für den Abgleich mit Selektoren verwendet werden. Die andere Hälfte wird zur Erstellung der berechneten Stildarstellung der übereinstimmenden Regeln. Rune Lillesveen, Opera Entwertung des Stils in Blink

Zeit für die Neuberechnung von Stilen und 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. Diese Seite konzentriert sich auf die Kosten für Stilberechnungen, bei einem Teil der Rendering-Phase im Zusammenhang mit der Interaktion auch die auch für Stilberechnungen.

Reduzieren Sie die Komplexität Ihrer Selektoren

Durch Vereinfachung der Selektornamen lässt sich der Stil Ihrer Seite beschleunigen Berechnungen an. Die einfachsten Selektoren verweisen auf ein Element in CSS mit nur einem Kursname:

.title {
  /* styles */
}

Aber wenn jedes Projekt wächst, benötigt es wahrscheinlich komplexere CSS, 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 mit der Klasse title, dessen übergeordnetes Element der minus-nth-plus-1 untergeordnetes Element mit der Klasse box?" Je nachdem, welchen Selektor verwendet wird, kann es sehr lange dauern, dies herauszufinden. und dem jeweiligen Browser. Sie können den Selektor ändern, um dies zu vereinfachen. nur ein Kursname ist:

.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 einen Selector mit einem Element abgleichen, nur weil seine Klasse übereinstimmt.

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

Eine andere Leistungsaspekt, die oft wichtiger ist als die Auswahl Komplexität ist 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.

Hinweis: Wenn Sie eine Klasse für ein Element geändert haben, wurden alle zugehörigen die berechneten Stile der untergeordneten Elemente neu berechnet werden müssen. In einigen Browsern Pflegen Sie stattdessen eine kleine Sammlung von Regeln, die für jedes Element einzigartig sind, die Stile des Elements, die neu berechnet werden, wenn sie sich ändern. Das bedeutet, dass ein muss möglicherweise neu berechnet werden, je nachdem, wo es sich in der Baumstruktur befindet, und was sich geändert hat.

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.

Hinweis :Stilberechnungen in Webkomponenten sind etwas anders, Stile überschreiten standardmäßig die Shadow DOM-Grenze nicht und sind auf und nicht auf den Baum als Ganzes. Insgesamt sind jedoch gilt weiterhin: Kleinere Bäume mit einfacheren Regeln werden als größere Bäume mit komplexeren Regeln.

Kosten für die Neuberechnung von Stilen 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 auf Aufzeichnen.
4. Interagieren Sie mit der Seite.

Wenn Sie die Aufnahme beenden, sehen Sie in etwa das folgende Bild:

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

</ph>

Ein Entwicklertools-Bericht mit Stilberechnungen

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 type="x-smartling-placeholder">

</ph>

Lang andauernde Frames in der Entwicklertools-Aktivität Zusammenfassung

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 type="x-smartling-placeholder">

</ph>

Eine lang andauernde Neuberechnung von Stilen erfordert über 25 ms in der Zusammenfassung der Entwicklertools.

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 und versuchen Sie, das Problem in Ihrem Code zu beheben.

Block, Element, Modifikator verwenden

Programmieransätze wie BEM (Block, Element, Modifier) in den Selektor fest, der die Leistungsvorteile entspricht. BEM empfiehlt, dass alle haben eine einzige Klasse, und wenn eine Hierarchie benötigt wird, ist auch im Klassennamen enthalten:

.list {
  /* Styles */
}

.list__list-item {
  /* Styles */
}

Wenn Sie einen Modifizierer benötigen, wie im letzten untergeordneten Beispiel, können Sie diesen hinzufügen: dies:

.list__list-item--last-child {
  /* Styles */
}

BEM ist ein guter Ausgangspunkt für die Organisation von CSS, sowohl von einer Struktur Perspektive. Aufgrund der Stilsuche vereinfacht sie die Suche.

Wenn Sie BEM nicht mögen, gibt es andere Möglichkeiten, mit Ihrem CSS umzugehen. Sie sollten jedoch bevor du beginnst, ihre Leistung und Ergonomie zu bewerten.

Ressourcen

• Stil ungültig in Blink
• BEM (Block, Element, Modifizierer)

Hero-Image von Unsplash von Markus Spiske