So verbessern Sie die CSS-Leistung

Verbesserungsmethoden: 1. Schreiben Sie den Stil in die CSS-Datei und referenzieren Sie ihn im Kopf. 3. Vermeiden Sie die Verwendung komplexer Selektoren. Je weniger Ebenen, desto besser 5. Verwenden Sie die CSS-Vererbung, um die Codemenge zu reduzieren. 6. Verwenden Sie Floating- und Positionierungsattribute. 7. Standardisieren Sie verschiedene Browser-Präfixe.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

So verbessern Sie die CSS-Leistung. Abhängig von der Ladeleistung der Seite und der Leistung des CSS-Codes ist die Hauptleistung: Ladeleistung (hauptsächlich beginnend mit der Reduzierung der Dateigröße, der Reduzierung des blockierten Ladens und der Verbesserung der Parallelität), Auswahlleistung , Rendering-Leistung, Wartbarkeit.

1. Versuchen Sie, den Stil in eine separate CSS-Datei zu schreiben und im Kopfelement darauf zu verweisen

(1) Inhalt und Stil sind getrennt, einfach zu verwalten und zu pflegen

(2) Reduzieren Sie die Seitengröße

(3 ) CSS-Datei Kann zwischengespeichert und wiederverwendet werden, wodurch die Wartungskosten gesenkt werden

2. Verwenden Sie nicht @import

Wenn Sie das @import-Attribut verwenden, um CSS einzuführen, wird dem Benutzer beim Surfen in einem langsamen Netzwerk eine Seite ohne Stile angezeigt . Wenn die CSS-Datei heruntergeladen wird, können Sie den richtigen Stil erkennen.

3 Vermeiden Sie die Verwendung komplexer Selektoren. Je weniger Ebenen, desto besser. Das Projekt enthält immer mehr Module und die Funktionen werden immer umfangreicher Wir schreiben: Der CSS-Selektor wird in mehreren Ebenen verschachtelt und immer komplexer. Es wird empfohlen, dass die Verschachtelung von Selektoren drei Ebenen nicht überschreitet. Ein prägnanter Selektor kann nicht nur die Größe der CSS-Datei reduzieren und die Ladeleistung der Seite verbessern, sondern ist auch effizienter, wenn der Browser sie analysiert Verbessern Sie außerdem die Entwicklungseffizienz der Entwickler und senken Sie die Entwicklungskosten.

4. Optimieren Sie die Stildateien der Seite und entfernen Sie nicht verwendete Stile.

(1) Die Stildateien sind zu groß, was sich auf die Ladegeschwindigkeit auswirkt.

(2) Der Browser führt einen redundanten Stilabgleich durch, was sich auf die Renderzeit auswirkt .

Führen Sie die von der aktuellen Seite verwendeten CSS-Dateien entsprechend dem von der aktuellen Seite benötigten CSS zusammen. Das Zusammenführen in einer Datei hat einen Vorteil: Die Style-Datei wird vom Browser zwischengespeichert und Sie müssen die Style-Datei nicht herunterladen andere Seiten betreten.

5. Verwenden Sie die CSS-Vererbung, um die Codemenge zu reduzieren.

Wir wissen, dass einige CSS-Codes vererbt werden können. Wenn das übergeordnete Element den Stil bereits festgelegt hat, muss dies ebenfalls der Fall sein effektive Methode zur Leistungsverbesserung.

6. Verwenden Sie Hochleistungsattribute mit Vorsicht: Floating und Positionierung

Einerseits sind die verschiedenen komplexen Layoutregeln des Floatings dazu bestimmt, einen explorativen lokalen Reflow-Layout-Algorithmus zu sein. Der Browser benötigt viel Aufwand, um es zu verarbeiten. Andererseits sind beim Layout schwebender Elemente noch viele weitere Faktoren von Bedeutung. Im selben Layoutraum befinden sich alle schwebenden Elemente in der „schwebenden Ebene“ über der „statischen Ebene“. Mehrere schwebende Elemente in der schwebenden Ebene beeinflussen sich nicht nur gegenseitig, sondern interagieren auch mit der statischen Ebene.

7. CSS-Stilpräfixe

Standardisieren Sie verschiedene Browserpräfixe, wobei Browserpräfixe zuerst und Standardpräfixe zuletzt verwendet werden.

8. CSS-Attributwerte

Wenn der Attributwert 0 ist, wird keine Einheit hinzugefügt. Der Attributwert Wann es ist eine Gleitkommazahl 0.**, Sie können die 0 vor dem Dezimalpunkt weglassen

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!