Spezifische Analyse der CSS-Interpretation zur Front-End-Leistungsoptimierung

Vermeiden Sie die Verwendung von @import

Die Verwendung von @import in externen CSS-Dateien führt zu einer zusätzlichen Verzögerung beim Laden der Seite.

Eine CSS-Datei first.css enthält den folgenden Inhalt: @import url("second.css"). Der Browser lädt zuerst first.css herunter, analysiert und führt ihn aus und erkennt und verarbeitet dann die zweite Datei second.css. Die einfache Lösung besteht darin, das 2cdf5bf648cf2f33323966d7f58a7f3f-Tag anstelle von @import zu verwenden, das die CSS-Dateien parallel herunterlädt und so das Laden der Seite beschleunigt.

AlphaImageLoader-Filter vermeiden

Was ist AlphaImageLoader? Ein einzigartiges Attribut des IE, das zur Korrektur des durchscheinenden Effekts von PNG-Bildern verwendet wird, die in Versionen unter 7.0 angezeigt werden.

Problem: Wenn der Browser ein Bild lädt, wird die Darstellung des Inhalts beendet und der Browser friert ein. Die Berechnung erfolgt einmal für jedes Element (nicht nur für das Bild), was den Speicherverbrauch erhöht.

Lösung: 1. Ersetzen Sie es durch das PNG8-Format, das im IE gut funktionieren kann.

2. Es ist wirklich notwendig, AlphaImageLoader und underscore_filter zu verwenden, um Benutzer von IE7 oder höher ungültig zu machen.

CSS-Ausdrücke vermeiden

Beispiel:

background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );

CSS-Ausdrücke sind eine leistungsstarke (aber gefährliche) Möglichkeit, CSS-Eigenschaften dynamisch festzulegen. Internet Explorer unterstützt CSS-Ausdrücke ab Version 5.

Problem: Es muss neu berechnet werden, wenn die Seite angezeigt, gezoomt, gescrollt oder die Maus bewegt wird. Fügen Sie einem CSS-Ausdruck einen Zähler hinzu, um zu verfolgen, wie oft der Ausdruck ausgewertet wird. Sie können problemlos mehr als 10.000 Berechnungen durchführen, indem Sie einfach die Maus über die Seite bewegen.

Lösung: Die Möglichkeit, die Anzahl der CSS-Ausdrucksberechnungen zu reduzieren, besteht darin, einen einmaligen Ausdruck zu verwenden, der das Ergebnis bei der ersten Ausführung dem angegebenen Stilattribut zuweist und dieses Attribut verwendet, um das zu ersetzen CSS-Ausdruck. Wenn sich Stileigenschaften während der Seitenzyklen dynamisch ändern müssen, ist die Verwendung von Ereignishandlern anstelle von CSS-Ausdrücken eine praktikable Option. Wenn Sie CSS-Ausdrücke verwenden müssen, denken Sie unbedingt daran, dass diese tausende Male ausgewertet werden und sich möglicherweise auf die Leistung Ihrer Seite auswirken.

Vermeiden Sie Platzhalter-Selektoren

In den Anfängen des Erlernens von CSS haben wir bei der Erstellung von Webseiten häufig *{margin: 0; padding: 0;} verwendet, um die Standardbezeichnung „Layout“ und „Rendering“ zu eliminieren das gleiche Tag in verschiedenen Browsern.

Und manchmal sehen wir, wie „Reset“ geschrieben wird.

body,p,h1,h2,h3,h4,h5,input,select,textarea,table{margin：0；padding：0;}

Warum schreiben diese Leute so? Die Antwort erhalten wir weiter unten

Beispiel:

#header > a {font-weight:blod;}

CSS-Selektor gleicht Regeln von rechts nach links ab. Diese Anweisung wird im Browser also wie folgt implementiert:

Der Browser durchläuft alle a-Elemente auf der Seite -> Ob die ID seines übergeordneten Elements der Header ist.

Beispiel:

#header  a {font-weight:blod;}

Dieses Beispiel nimmt mehr Zeit in Anspruch als das vorherige

Durchsuchen Sie die Seite Alle a-Elemente in ——>Traverse zu ihren übergeordneten Elementen bis zum Wurzelknoten

Beispiel:

.selected * {color: red;}

Entspricht allen Elementen im Dokument -> Elemente mit Klasse, die Ebene für Ebene ausgewählt werden, bis zum Wurzelknoten des Dokuments

Daher sollten wir die Verwendung von Wildcard-Selektoren vermeiden .

Unübertroffene Stile entfernen

Erstens kann das Löschen nutzloser Stile die Größe von Stildateien reduzieren und das Herunterladen von Ressourcen beschleunigen.

Zweitens werden bei Browsern alle Stilregeln analysiert und indiziert, auch wenn die aktuelle Seite keine passenden Regeln hat. Entfernen Sie nicht übereinstimmende Regeln, reduzieren Sie die Anzahl der Indexelemente und beschleunigen Sie die Browsersuche.

Vermeiden Sie Attributselektoren mit einer einzigen Regel.

Der Browser stimmt mit allen Elementen überein. Überprüfen Sie, ob das Attribut href und das Attribut herf vorhanden sind Wert ist gleich „#index“ –> Elemente mit der ausgewählten Klasse nach oben bis zum Wurzelknoten des Dokuments abgleichen.

Vermeiden Sie reguläre Attributselektoren.

Der Abgleich mit regulären Ausdrücken ist viel langsamer als der kategoriebasierte Abgleich. In den meisten Fällen sollten wir versuchen, die Verwendung der Syntax *=, |=, ^=, $= und ~= für Attributselektoren zu vermeiden.

Das obige ist der detaillierte Inhalt vonSpezifische Analyse der CSS-Interpretation zur Front-End-Leistungsoptimierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!