CSS-Leistungsanalyse, wie man CSS optimiert, um die Leistung zu verbessern

Erleben Sie sich selbst in zehn Jahren, lasst uns einander ermutigen!

Front-End-Leistungsoptimierung war schon immer ein heißes Thema. Wir tun immer unser Bestes, um die Leistung unserer Seiten zu verbessern, indem wir beispielsweise HTTP-Anfragen reduzieren, Tools zum Zusammenführen und Komprimieren von Ressourcen verwenden und Skripte platzieren Vermeiden Sie unten doppelte Anforderungen, CSS-Sprites usw. Tatsächlich gibt es viele Methoden, die darauf abzielen, die Dateigröße zu reduzieren, Anfragen zu reduzieren und JS zu optimieren. Nur wenige Menschen schenken CSS große Aufmerksamkeit, und einige komprimieren CSS sogar nicht.

Tatsächlich verursacht nicht standardmäßiges CSS viele Leistungsprobleme. Bei einigen kleinen Projekten sind diese Probleme möglicherweise nicht offensichtlich genug, bei großen Projekten werden sie jedoch offensichtlich.

CSS-Matching-Prinzip

Bevor wir CSS optimieren, müssen wir verstehen, wie CSS funktioniert. Wir alle wissen, dass CSS aus Selektoren, Attributen und Attributwerten besteht.

Wir könnten eine Codezeile wie diese schreiben

<span style="color: #000000;">//css
.con .loulan1 p span{ display: block; }

//html
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="loulan"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>文字<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Hier definieren wir den Stil des Span-Tags im P-Tag in der Loulan-Klasse in der Con-Klasse. Ich bin es leid, es zu sagen, geschweige denn, es zu schreiben. Tatsächlich kann man sich den Browser als eine Person vorstellen, und es wird beim Rendern definitiv Leistung verschwenden.

Und Das Matching-Prinzip von CSS ist nicht von links nach rechts, sondern von rechts nach linksDas heißt, in dieser Zeile unseres Codes suchen wir zuerst nach Seite Alle Span-Elemente bilden eine Menge und durchsuchen dann alle Span-Elemente, um zu sehen, wie viele Spans ein p-Element haben, dessen übergeordnetes Element ein p-Element ist, oder ein übergeordnetes Element, dessen übergeordnetes Element ein p-Element ist, oder ... langsam suchen und einfügen Löschen Sie das Übergeordnetes Element, das kein p-Element ist. Suchen Sie dann nach oben, um zu sehen, wie viele p-Elemente es in der Sammlung gibt. Die Klasse seines übergeordneten Elements ist loulan... Der Browser sagte: Ich bin so müde...

Tatsächlich besteht der Vorteil der Browsersuche von rechts nach links darin, dass einige irrelevante Stilregeln und -elemente so früh wie möglich herausgefiltert werden. Und Firefox nennt diese Suchmethode „keyselector“ (Schlüsselwortabfrage). Das sogenannte Schlüsselwort ist die letzte (ganz rechts stehende) Regel in den Stilregeln. Der ursprüngliche Zweck besteht darin, einige irrelevante Stilregeln so schnell wie möglich herauszufiltern, Schicht für Schicht, Schicht für Schicht, ohne anzuhalten. Wenn ich also nur den Stil eines Spans definieren möchte, wäre es dann nicht besser, dem Span eine Klasse hinzuzufügen? Jetzt fragt sich jemand: Ist es notwendig, jedem Element eine Klasse hinzuzufügen? Das ist definitiv nicht notwendig, aber wir müssen verstehen, wie der Browser Übereinstimmungen findet, und diese dann mit der aktuellen Struktur kombinieren, um die beste und bequemste Schreibweise zu erzielen.

<span style="color: #000000;">//css
.loulanSpan{ display: block; }

//html
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="loulan"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="loulanSpan"</span><span style="color: #0000ff;">></span>文字<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

CSS-Selektorgewicht

Hier ist die Gewichtung des CSS-ID-Klassen-Tag-Selektors, die ihre Priorität darstellt. Je größer die Gewichtung, desto höher die Priorität

ID:100

Klasse:10

Tag:1

Lassen Sie uns anhand der beiden oben genannten Grundlagen ausführlich darüber sprechen, wie Sie CSS optimieren können, um die Leistung zu verbessern

1. Es ist am besten, nicht mehr als drei Ebenen mit Klassen zu verschachteln, und beim Schreiben von CSS müssen keine Klassen auf Blockebene hinzugefügt werden sind mit Inline-Tags verschachtelt. Dies kann nicht nur die Größe der CSS-Datei reduzieren und Leistungsverluste reduzieren.

2. Nicht vor dem ID-Selektor verschachteln. Die ID ist von Natur aus einzigartig und das Gewicht ist so groß.

3. Erstellen Sie eine öffentliche Stilklasse und extrahieren Sie lange Abschnitte desselben Stils wie eine öffentliche Klasse. Beispielsweise verwenden wir häufig klare Gleitkommazahlen, zeigen Auslassungspunkte an, wenn eine einzelne Zeile den Grenzwert überschreitet. Natürlich, wenn Sie verwenden Sass, die Vererbung wird es für Sie bequemer machen. Gleichzeitig befürworte ich die Verwendung von Sass und werde in Zukunft auf jeden Fall einen Sass-Blog schreiben.

4. Abkürzungs-CSS, einschließlich Abkürzungsmagin, Polsterung, Farbwert usw. Wenn es zwei oder mehr Margin-**** gibt, schreiben Sie margin: * * * *, um die Dateigröße zu unterstützen.

5. Reduzieren Sie die Verwendung von Platzhaltern * oder Selektoren wie [hidden="true"] und durchsuchen Sie alle nacheinander ... Ist diese Leistung gut? Natürlich sind notwendige Dinge wie das Zurücksetzen des Stils unverzichtbar.

6. Manche Leute fügen zur genaueren Positionierung gerne den Tag-Namen: p.ty_p hinzu, aber das ist oft weniger effizient. Der Klassenname sollte im globalen Bereich liegen, es sei denn, die Öffentlichkeit ist eindeutig. also dieser Ansatz Es sollten Instantnudeln sein.

7. Nutzen Sie den Vererbungsmechanismus von CSS geschickt. Viele Attribute in CSS können vererbt werden, z. B. Farbe, Schriftart usw. Sobald der übergeordnete Knoten definiert ist, müssen die untergeordneten Knoten nicht definiert werden.

8. Bei größeren Projekten können wir die gängigen Strukturstile der meisten Seiten extrahieren und in separate CSS-Dateien einfügen, sodass sie nach einem Download im Cache abgelegt werden können Der Ansatz erhöht die Anzahl der Anfragen, und der spezifische Ansatz sollte auf der Grundlage der tatsächlichen Situation festgelegt werden.

9. Es besteht keine Notwendigkeit für CSS-Ausdrücke, aber was Sie bedenken müssen, ist, dass es am Ende statisch sein wird, sodass Ausdrücke nur Ihren Code ausmachen Sie sehen zwar cooler aus, sind aber die Leistungsverschwendung, die Sie sich vielleicht nicht vorstellen können, denn sie wird nicht nur einmal berechnet, sondern einige kleine Ereignisse können die Anzahl der Berechnungen und Auswertungen erhöhen, die durchgeführt werden müssen, um effektiv und genau zu sein.

10. Verwenden Sie weniger CSS-Rest. Sie denken vielleicht, dass das Zurücksetzen des Stils die Norm ist, aber tatsächlich sind viele der Vorgänge unnötig und unfreundlich. Sie können sich für normolize.css entscheiden

11, cssSprite, synthetisiert alle Symbolbilder und verwendet die Breite, Höhe und Hintergrundposition des Hintergrundbilds, um das gewünschte Symbolbild anzuzeigen. Dies ist eine sehr praktische Technik, die HTTP-Anfragen erheblich reduziert.

Natürlich brauchen wir noch etwas Nacharbeit, CSS-Komprimierung (hier ist ein YUI-Kompressor für die Online-Komprimierung, natürlich können Sie auch andere Tools zum Komprimieren verwenden, die sehr gut ist), GZIP-Komprimierung, Gzip ist ein beliebter Dateikomprimierungsalgorithmus, Details Sie können es auf Google oder Baidu suchen.

Natürlich kann die CSS-Leistungsoptimierungstechnologie mehr als nur das sein. Freunde können sie gerne hinzufügen und teilen.