Foto von Jantine Durnbos bei Unsplash

Dies ist keineswegs eine Kritik an Kollegen, sondern nur eine kurze Liste wichtiger Dinge, die ich selbst in letzter Zeit über CSS gelernt habe.

Es ist kein Geheimnis, dass viele Entwickler nicht an CSS denken. Dies ist leicht an Diskussionen im Internet und in Gesprächen mit Freunden und Kollegen zu erkennen. Trotzdem bekommen wir genau von Kollegen viel Wissen, und manchmal verstehe ich, dass mir niemand von einigen wichtigen CSS-Nuancen erzählt hat, weil die Leute einfach keine Zeit damit verbringen, dieses Thema zu studieren.

Um dies zu beheben, habe ich einige Nachforschungen angestellt und eine kurze Liste von Konzepten erstellt, die ich für ein besseres Verständnis und Schreiben von CSS interessant und nützlich finde.

Diese Liste ist definitiv nicht vollständig. Es enthält nur das Neue, das ich in den letzten Tagen gelernt habe und was ich teilen möchte. Auf einmal wird es jemand anderem helfen.

Terminologie

Wie bei jeder Programmiersprache werden bestimmte Begriffe verwendet, um Konzepte zu beschreiben. Als Programmiersprache ist CSS nicht anders. Daher ist es wichtig, einige Begriffe zu lernen, um die Kommunikation zu vereinfachen und nur für die persönliche Entwicklung.

Nachkomme Kombinator

Haben Sie die Lücke zwischen den Selektoren in Ihrem Stil gesehen? Tatsächlich hat es einen Namen, es ist ein Nachkommen-Kombinator.


Nachkomme Kombinator

Layout, Rendering und Komposition

Diese Begriffe beziehen sich auf das Rendern im Browser, sind jedoch wichtig, da einige CSS-Eigenschaften die verschiedenen Schritte der Rendering-Pipeline beeinflussen.

1. Layout

Der Layoutschritt ist die Berechnung, wie viel Platz ein Element auf dem Bildschirm einnimmt. Wenn Sie die Eigenschaft "Layout" in CSS ändern (z. B. Breite, Höhe), muss der Browser alle anderen Elemente überprüfen und die Seite neu zeichnen, dh die betroffenen Bereiche neu streichen und überlappen.

2. Zeichnen (malen)

Dieser Vorgang füllt alle visuellen Teile der Elemente (Farben, Ränder usw.) mit Pixeln. Elemente werden normalerweise auf mehreren Ebenen gezeichnet.

Das Ändern der Eigenschaft 'paint' wirkt sich nicht auf das Layout aus, sodass der Browser den Layoutschritt überspringt, das Rendern jedoch trotzdem ausführt.

Das Rendern nimmt beim Rendern oft die meiste Zeit in Anspruch.

3. Zusammensetzung (zusammengesetzt)

Die Komposition ist der Schritt, in dem der Browser die Ebenen in der richtigen Reihenfolge zeichnen soll. Da sich einige Elemente möglicherweise überschneiden, überprüft der Browser zu diesem Zeitpunkt, ob die Elemente in dieser Reihenfolge angezeigt werden.

Wenn Sie die CSS-Eigenschaft ändern, die weder das Layout noch das Rendering beeinflusst, muss der Browser nur die Komposition durchführen.

Weitere Informationen darüber, welche Prozesse verschiedene CSS-Eigenschaften auslösen, finden Sie unter CSS-Trigger .

CSS-Leistung

Nachwuchswähler kann teuer sein

Abhängig von der Größe Ihrer Anwendung kann die Verwendung nur des Nachkommen-Selektors ohne spezifische Anweisungen die Ressourcen schwer treffen. Der Browser überprüft die Übereinstimmung mit jedem Element des Nachkommens, da die Beziehung nicht auf das übergeordnete und das untergeordnete Element beschränkt ist.

Zum Beispiel:


Beispiel für die Nachkommenauswahl

Der Browser muss alle Links auf der Seite auswerten, bevor er zu den Links in unserem Abschnitt #nav .

Eine effizientere Möglichkeit besteht darin, jedem <a> #nav Abschnitt #nav einen bestimmten .navigation-link Selektor #nav .

Der Browser liest die Selektoren von rechts nach links

Es scheint, dass ich diese wichtige Sache vorher hätte wissen sollen, aber ich wusste es nicht ... Beim Parsen von CSS analysiert der Browser die Selektoren von rechts nach links.

Betrachten Sie das folgende Beispiel:


Der Browser liest von rechts nach links

Schritte:

• stimmen alle <a> auf der Seite überein;
  
• finde alle <a> in <li> ;
  
• Nehmen Sie Streichhölzer und beschränken Sie sie auf die in <ul> ;
  
• Filtern Sie abschließend die obige Auswahl nach den im Element enthaltenen mit der Klasse .container .

Wenn wir uns diese Schritte ansehen, sehen wir, dass der Browser CSS-Eigenschaften umso effizienter filtern und anwenden kann, je spezifischer der richtige Selektor ist.

Um die Leistung des obigen Beispiels zu verbessern, könnten wir .container ul li a ersetzen, .container ul li a wir dem <a> -Tag selbst etwas wie .container-link-style hinzufügen.

Wenn möglich, ändern Sie das Layout nicht.

Änderungen an einigen CSS-Eigenschaften erfordern die Aktualisierung des gesamten Layouts.

Beispielsweise erfordern die geometrischen Eigenschaften von width , height , top und left eine Neuberechnung des Layouts und eine Aktualisierung des Rendering-Baums.

Wenn Sie diese Eigenschaften für viele Elemente ändern, dauert es lange, ihre Position / Größe zu berechnen und zu aktualisieren.

Seien Sie vorsichtig mit der Komplexität des Renderns

Einige CSS-Eigenschaften (wie Unschärfe) sind beim Rendern teurer als andere. Überlegen Sie sich effektivere Wege, um das gleiche Ergebnis zu erzielen.

Teure CSS-Eigenschaften

Einige CSS-Eigenschaften sind teurer als andere. Dies bedeutet, dass das Rendern länger dauert.

Einige der teuren Immobilien:

• border-radius
• box-shadow
• filter
• :nth-child
• position: fixed

Dies bedeutet nicht, dass sie überhaupt nicht verwendet werden können. Sie müssen jedoch verstehen, dass ein Element, das einige dieser Eigenschaften verwendet und hunderte Male gerendert wird, die Leistung beeinträchtigt.

Bestellung

Ordnung ist wichtig

Schauen wir uns ein solches CSS an:



Und dann schauen Sie sich den HTML-Code an:



Die Reihenfolge der Selektoren in HTML spielt keine Rolle, in CSS jedoch.

---

Eine gute Möglichkeit, die CSS-Leistung zu bewerten, besteht darin, die Entwicklertools in einem Browser zu verwenden.

In Chrome oder Firefox können Sie die Entwicklertools öffnen, zur Registerkarte Leistung wechseln und aufzeichnen, was passiert, wenn Sie Ihre Seite laden oder mit ihr interagieren.


Screenshot der Registerkarte "Leistung" in Chrome

Ressourcen

Als ich das Thema für diesen Artikel erkundete, stieß ich auf einige wirklich interessante Tools, die unten aufgeführt sind:

CSS Triggers ist eine Website, auf der einige CSS-Funktionen und deren Auswirkungen auf die Leistung aufgeführt sind.

Uncss ist ein Tool zum Entfernen nicht verwendeter Stile aus CSS.

Css-EXPLAIN ist ein kleines Tool, das CSS-Selektoren erklärt.

Fastdom ist ein DOM-Batch-Lese- / Schreibwerkzeug zur Beschleunigung der Layoutleistung .

Das ist alles für jetzt! Hoffe das macht Sinn!