So verbessern Sie die CSS-Leistung

In diesem Artikel werden hauptsächlich die Methoden der CSS-Leistungsoptimierung vorgestellt, um die CSS-Leistung zu verbessern. Nicht standardmäßiges CSS verursacht viele Leistungsprobleme. Daher ist es sehr wichtig, Fähigkeiten zur CSS-Leistungsoptimierung zu erlernen und zu beherrschen Wissen kommt zusammen. Lasst uns lernen

Unregelmäßiges CSS verursacht viele Leistungsprobleme. Diese Probleme sind in einigen kleinen Projekten möglicherweise nicht offensichtlich genug, aber in großen Projekten werden sie offensichtlich.

CSS-Matching-Prinzip

Bevor wir CSS optimieren, müssen wir verstehen, wie CSS funktioniert von Attributen und Attributwerten.

Wir können eine Codezeile wie diese schreiben

//css   
.con .loulan1 p span{ display: block; }   
//html   
<p class="con">   
    <p class="loulan">   
        <p><span>文字</span></p>   
    </p>   
</p>

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 links. Das heißt, in dieser Zeile unseres Codes finden wir zunächst alle Span-Elemente auf der Seite, um ein zu bilden set, und durchsuchen Sie dann alle Span-Elemente, um zu sehen, wie viele Spans ein übergeordnetes Element haben, das ein p-Element ist, oder ein übergeordnetes Element, dessen übergeordnetes Element ein p-Element ist, oder ... Suchen Sie langsam und löschen Sie diejenigen, deren übergeordnetes Element kein p-Element ist . Gehen Sie nach oben und suchen Sie, um zu sehen, wie viele p-Elemente es in der Sammlung gibt. Die Klasse des übergeordneten Elements ist loulan... Der Browser sagte: Ich bin so müde...

Tatsächlich der Browser Die Suche erfolgt von rechts nach links. Der Vorteil besteht darin, einige irrelevante Stilregeln und -elemente so früh wie möglich herauszufiltern. Und Firefox nennt diese Suchmethode Keyselector (Schlüsselwortabfrage). Das sogenannte Schlüsselwort ist die letzte (ganz rechts stehende) Regel in den Stilregeln, und der Schlüssel darüber ist span. 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? Jemand möchte zu diesem Zeitpunkt fragen: 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.

//css 
.loulanSpan{ display: block; }   
//html 
<p class="con">   
    <p class="loulan">   
        <p><span class="loulanSpan">文字</span></p>   
    </p>   
</p>

Gewicht des CSS-Selektors

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

ID:100

Klasse:10

Tag:1

Auf der Grundlage der beiden oben genannten Lassen Sie uns im Detail darüber sprechen, wie CSS optimieren, um die Leistung zu verbessern

1. Reduzieren Sie die Verschachtelung von CSS. Im Allgemeinen werden Elemente auf Blockebene nicht mit Klassen hinzugefügt . Verwenden Sie beim Schreiben von CSS Klassen auf Blockebene, um Inline-Tags festzulegen. Dadurch kann nicht nur die Größe der CSS-Datei verringert, sondern auch die Leistungsverschwendung verringert werden.

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. Wenn Sie Sass verwenden, ist die Vererbung bequemer. Gleichzeitig befürworte ich die Verwendung von Sass und werde in Zukunft definitiv einen Sass-Blog schreiben.

4, abgekürztes CSS, einschließlich Abkürzungsmagin, Polsterung, Farbwert usw. Wenn zwei oder mehr Rand-**** vorhanden sind, schreiben Sie Rand: * * * *Hilfedateigröße.

5. Reduzieren Sie die Verwendung von Platzhaltern * oder Selektoren wie [hidden="true"] und durchsuchen Sie alle ... 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, er ist öffentlich ist einzigartig, daher sollte dieser Ansatz sofort durchgeführt werden.

7. Nutzen Sie den Vererbungsmechanismus von CSS geschickt. Viele Attribute in CSS können vererbt werden, wie 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 gemeinsamen Strukturstile der meisten Seiten extrahieren und sie in separate CSS-Dateien einfügen, damit sie nach einem Download im Cache abgelegt werden können Natürlich erhöht dieser Ansatz die Nachfrage, 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, also nur Ausdrücke Lassen Sie Ihren Code cooler aussehen, aber die Leistungsverschwendung kann Ihre Vorstellungskraft übersteigen, da er nicht nur einmal berechnet wird. Einige kleine Ereignisse können die Anzahl der Berechnungen erhöhen, die er durchführen muss, um effektiv und genau zu sein.

10. Sie denken vielleicht, dass das Zurücksetzen des Stils die Norm ist, aber tatsächlich sind viele der Vorgänge unnötig und unfreundlich. Freunde, die es brauchen, 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.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

CSS-Stil-Überschreibungsregeln

Das obige ist der detaillierte Inhalt vonSo verbessern Sie die CSS-Leistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!