CSS-Optimierung: Welche Methoden gibt es, um die Leistung zu verbessern?

Methoden: 1. Komprimieren Sie CSS, um die Dateigröße zu reduzieren. 2. Verwenden Sie den Link, um CSS-Dateien zu importieren. 3. Gestalten Sie das CSS-Layout rational, achten Sie auf die Wiederverwendung von Stilen und reduzieren Sie den Zeitaufwand für das Rendern. 5. Verwenden Sie Hochleistungsattribute wie Floating und Positionierung mit Vorsicht. 6. Minimieren Sie Neuanordnungen und Neuzeichnungen. 7. Wenn der Attributwert 0 ist, werden keine Einheiten hinzugefügt.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS-Optimierung konzentriert sich hauptsächlich auf 4 Aspekte:

• Ladeleistung

  Hauptsächlich angefangen bei der Reduzierung der Dateigröße, der Reduzierung des blockierenden Ladens und der Verbesserung der Parallelität

• Auswahlleistung

• Rendering-Leistung

• Wartbarkeit und Robustheit

Im Folgenden erhalten Sie eine detaillierte Einführung.

Ladeleistung:

1. CSS-Komprimierung: Das Packen und Komprimieren des geschriebenen CSS kann viel Volumen reduzieren;

2. CSS-Einzelstil: Wenn unterer Rand und linker Rand erforderlich sind,

Viele mal wählen: margin: top 0 bottom 0;margin: top 0 bottom 0;

但 margin-bottom: bottom;margin-left: left;

Aber margin-bottom: bottom;margin-left: left; führt effizienter aus

3. Reduzieren Sie die Verwendung von @import, und es wird empfohlen, einen Link zu verwenden, da letzterer beim Laden der Seite zusammen geladen wird und ersterer darauf wartet, dass die Seite geladen wird.

4 Achten Sie darauf, dass das CSS-Layout rational ist Wiederverwendung von Stilen und Reduzierung der Renderzeit Nehmen Sie sich Zeit. Verwenden Sie bei der Auswahl von Klassen und IDs weniger globale Übereinstimmungen wie * und legen Sie grundlegende Stile entsprechend fest (z. B. Setting Table{}), um die Wiederverwendung zu verbessern.

Selektorleistung:

CSS-Selektoren werden von rechts nach links abgeglichen. Bei Verwendung des Nachkommenselektors durchläuft der Browser alle untergeordneten Elemente, um festzustellen, ob es sich um das angegebene Element usw. handelt Berechnungen! Wählen Sie nur die Elemente aus, die Sie verwenden müssen

** Versuchen Sie, so wenige Tags wie möglich auszuwählen, aber verwenden Sie Klasse**

Zum Beispiel: #nav li{}, Sie können den Klassennamen von nav_item zu li hinzufügen, Wählen Sie .nav_item{} wie folgt aus

**Verwenden Sie keine Tags, um ID- oder Klassenselektoren einzuschränken**

Zum Beispiel: ul#nav sollte zu #nav vereinfacht werden

**Verwenden Sie so wenig Nachkommenselektoren Reduzieren Sie den Gewichtungswert des Selektors so weit wie möglich**

Die Kosten für untergeordnete Selektoren sind am höchsten. Versuchen Sie, die Tiefe des Selektors auf ein Minimum zu reduzieren. Verwenden Sie maximal drei Ebenen, um sie zuzuordnen Etikettenelement

**Erwägen Sie die Vererbung**

Verstehen Sie, welche Attribute vererbt werden können, und vermeiden Sie dann die wiederholte Angabe von Regeln für diese Attribute

Rendering-Leistung:

1. Verwenden Sie Hochleistungsattribute sorgfältig: float, Positionierung; 2. Seitenneuanordnung und Neuzeichnen minimieren;

Neu anordnen gemäß der Schreibreihenfolge von CSS:

Position: Position, oben, links, Z-Index, Float, Anzeige

• Größe: Breite, Höhe, Rand, Abstand

• Textserie: Schriftart, Zeilenhöhe, Farbe, Buchstabenabstand

• Hintergrundrand: Hintergrund, Rand

• Andere: Animation, Übergang

• Neuzeichnen: Rand, Umriss, Hintergrund, Kastenschatten, wenn Sie Hintergrundfarbe verwenden können, versuchen Sie, keinen Hintergrund zu verwenden.
  4. Wenn der Attributwert 0 ist, wird keine Einheit hinzugefügt.**, und die 0 vor dem Dezimalpunkt kann weggelassen werden
• 6 Präfixe: mit vorangestellten Browser-Präfixen. Standardattribute kommen an letzter Stelle;
  7. Verwenden Sie nicht das Präfix @import, da dies die Ladegeschwindigkeit von CSS beeinträchtigt.

8

10. Optimieren Sie die Verschachtelung von Selektoren und vermeiden Sie zu tiefe Ebenen.

11. CSS-Sprite-Bilder sind praktisch und reduzieren die Anzahl von Seitenanfragen, aber gleichzeitig wird das Bild selbst größer, also überlegen Sie bei der Verwendung sorgfältig die Vor- und Nachteile, bevor Sie die CSS-Datei oben auf der Seite platzieren

Wartbarkeit und Robustheit:

1. Extrahieren Sie Stile mit denselben Attributen und verwenden Sie Klassen in der Seite, um die Wartbarkeit von CSS zu verbessern.

2. Nach dem vorherigen Artikel ist oocss auch eine Möglichkeit, die CSS-Leistung zu verbessern Durch das Definieren wiederverwendbarer und semantisch guter Basisklassen und das anschließende Hinzufügen in HTML wird dies auch von vielen UI-Frameworks verwendet, zum Beispiel: class="btn btn-active btn-blue"

3 : CSS-Code in externes CSS definieren;

4. Trennung von Containern und Stilen

Weitere Programmierkenntnisse finden Sie unter:

Programmiervideo

! !

Das obige ist der detaillierte Inhalt vonCSS-Optimierung: Welche Methoden gibt es, um die Leistung zu verbessern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!