So schreiben Sie besseres CSS im Hinblick auf Leistung

In dem heutigen Beitrag werden wir über die Codeauswahl nachdenken, die wir in CSS zur Verbesserung der Website-Performance treffen können. Bevor wir uns jedoch mit diesen Optionen beschäftigen, betrachten wir zunächst den Workflow für das Rendern von Webseiten genauer, um uns auf dieproblematische (leistungsmäßige) Bereiche, die über CSS lösbar sind.

Hier ist der grobe Arbeitsfluss, den der Browser nach der Erstellung der DOM-Baumstruktur ausführt:

1. Stil neu berechnen (und Render-Baum-Erstellung). Der Browser berechnet die Stile, die auf die Elemente in der DOM-Baumstruktur angewendet werden sollen. Eine Render-Struktur wird später erstellt, während die Knoten (Elemente) aus der DOM-Struktur gelöscht werden, die nicht gerendert werden sollen (Elemente mit Anzeige: keine) und diejenigen, die (Pseudo-Elemente).
2. Layout (auch bekannt als Reflow). Mit dem zuvor berechneten Stil berechnet der Browser die Position und Geometrie jedes Elements auf der Seite.
3. Repaint. Sobald das Layout zugeordnet ist, werden Pixel auf den Bildschirm gezeichnet.
4. Verbundschichten. Während der Neulackierung kann das Malen autonom in verschiedenen Ebenen erfolgen; Diese Schichten werden dann endgültig miteinander kombiniert.

Jetzt machen wir weiter mit dem, was wir in den ersten drei Schritten der Operation tun können, um leistungsfähigere CSS-Codes zu schreiben.

1. Reduzieren Sie Stilberechnungen

Wie bereits erwähnt, berechnet der Browser in der Phase "Stil neu berechnen" die auf die Elemente anzuwendenden Stile. Dazu ermittelt der Browser zunächst alle Selektoren im CSS, die auf einen bestimmten Elementknoten im DOM-Baum zeigen. Dann werden alle Stilregeln in diesen Selektoren durchlaufen und entschieden, welche Regeln tatsächlich auf das Element angewendet werden sollen.

Um kostspielige Stilberechnungen zu vermeiden, komplexe und tief verschachtelte Selektoren reduzieren So kann der Browser leichter herausfinden, auf welches Element sich ein Selektor bezieht. Dies reduziert die Rechenzeit.

Andere Einsatzmöglichkeiten umfassen Reduzierung der Anzahl von Stilregeln (wo möglich), Entfernen Sie nicht verwendetes CSS und zu vermeiden Redundanz und Überschreibungen, damit der Browser bei der Stilberechnung nicht immer wieder denselben Stil durchlaufen muss.

2. Reflows reduzieren

Reflows oder Layoutänderungen in einem Element sind sehr "teure" Prozesse und können ein noch größeres Problem darstellen, wenn das Element, das die Layoutänderungen durchlaufen hat, eine beträchtliche Anzahl von Kindern hat (seitdem Reflows kaskadieren die Hierarchie nach unten).

Reflows werden durch Layoutänderungen an einem Element ausgelöst, z. B. Änderungen an den geometrischen Eigenschaften wie Höhe oder Schriftgröße, Hinzufügen oder Entfernen von Klassen zu Elementen, Ändern der Fenstergröße, Aktivierung :schweben, DOM-Änderungen durch JavaScript usw.

Wie bei der Stilberechnung, um Reflows zu reduzieren, vermeiden Sie komplexe Selektoren und tiefe Dombäume (Wiederum, um das übermäßige Kaskadieren von Reflows zu verhindern).

Wenn Sie die Layoutstile einer Komponente auf Ihrer Seite ändern müssen, zielen Sie auf die Stile des Elements, das in der Elementhierarchie am niedrigsten ist dass das Bauteil aus ist. Dies ist so, dass die Layoutänderungen (fast) keine anderen Reflows auslösen.

Wenn Sie ein Element animieren, das Layoutänderungen durchläuft, nimm es aus dem Seitenfluss heraus durch ohne es zu positionieren, da das Reflow in absolut positionierten Elementen den Rest der Elemente auf der Seite nicht beeinflusst.

Zusammenfassen:

• Zielelemente, die in der DOM-Struktur niedriger sind, wenn Layoutänderungen vorgenommen werden
• Wählen Sie absolut positionierte Elemente für Layout-ändernde Animationen
• Vermeiden Sie nach Möglichkeit Animationen für das Layout

3. Repaints reduzieren

Repaint bezieht sich auf das Zeichnen von Pixeln auf dem Bildschirm und ist genau wie Reflow ein teurer Prozess. Repaints können durch Reflows, Blättern der Seite und Änderungen der Eigenschaften wie Farbe, Sichtbarkeit und Deckkraft ausgelöst werden.

Um häufige und umfangreiche Nachlackierungen zu vermeiden, Verwenden Sie weniger der Eigenschaften, die kostspielige Nachlackierungen verursachen wie Schatten.

Wenn Sie Eigenschaften eines Elements animieren, das direkt oder indirekt Repaint auslösen kann, ist dies von großem Vorteil wenn sich dieses Element in einer eigenen Ebene befindet Verhindern, dass der Zeichenprozess den Rest der Seite beeinflusst und Hardwarebeschleunigung auslöst. Bei der Hardwarebeschleunigung übernimmt die GPU die Aufgabe, die Animationsänderungen in der Ebene durchzuführen, wodurch die CPU zusätzliche Arbeit erspart und der Prozess beschleunigt wird.

In einigen Browsern, Opazität (mit einem Wert von weniger als 1) und verwandeln (anderer Wert als keiner) werden automatisch auf neue Ebenen hochgestuft, und für Animationen und Übergänge wird die Hardwarebeschleunigung angewendet. Diese Eigenschaften für Animationen zu bevorzugen, ist daher gut.

Zu kraftvoll ein Element auf eine neue Ebene bringen und in die Hardwarebeschleunigung einsteigen Für die Animation gibt es zwei Techniken:

1. hinzufügen transform: translate3d (0, 0, 0); Trick den Browser dazu, die Hardwarebeschleunigung für Animationen und Übergänge auszulösen.
2. Ergänzen Sie die wird sich verändern Eigenschaft für das Element, die den Browser über die Eigenschaften informiert, die sich wahrscheinlich in der Zukunft in dem Element ändern werden. Hinweis: Sara Soueidan hat einen ausführlichen und sehr hilfreichen Artikel auf der Dev.Opera-Site.

Zusammenfassen:

• Vermeiden Sie teure Styles, die Repaints verursachen
• Suchen Sie nach Layer-Promotion und Hardware-Beschleunigung für umfangreiche Animationen und Übergänge.

Beachten

(1) Bis jetzt haben wir die Reduzierung der CSS-Dateigröße nicht angesprochen. Wir haben erwähnt, dass die Reduzierung von Stilregeln (und DOM-Elementen) eine erhebliche Leistungsverbesserung bewirkt Wie viel muss der Browser funktionieren Weniger auf dem Prozess der Berechnung der Stile. Als Folge dieser Code-Reduktion werden bessere Selektoren geschrieben und nicht verwendete CSS gelöscht, Die Dateigröße nimmt automatisch ab.

(2) Es ist auch ratsam Nehmen Sie nicht zu viele Änderungen an den Stilen eines Elements in JavaScript vor. Fügen Sie dem Element stattdessen eine Klasse hinzu (mithilfe von JavaScript), die die neuen Stile enthält, um diese Änderungen vorzunehmen. Dadurch werden unnötige Reflows vermieden.

(3) Sie werden wollen Vermeiden Sie Layout-Thrashing (Zwangssynchrones Reflows), das durch den Zugriff und die Änderung der Layout-Eigenschaften von Elementen mit JavaScript entsteht. Lesen Sie hier mehr darüber, wie dies die Leistung beeinträchtigt.