Verkürzen Sie die Seiten-Rendering-Zeit, damit die Seite schneller läuft

Wie kann die Seiten-Rendering-Zeit im Browser so weit wie möglich verkürzt werden? Dieser Artikel geht von den folgenden Aspekten aus:

• Schreiben Sie effizienten CSS-Code
• Vermeiden Sie die Verwendung von CSS-Ausdrücken
• Platzieren Sie die CSS-Datei oben auf der Seite
• Geben Sie die Größe des Seitenbildes an
• Der Seitenkopf gibt den Dokumentcode an

1. Schreiben Sie effizienten CSS-Code

Verstehen Sie zunächst den Prozess der Browseranalyse von HTML-Code: Erstellen Sie einen DOM-Baum, und jedes auf der Seite anzuzeigende Element wird in diesem DOM-Baum erstellt. Wenn dem DOM-Baum ein neues Element hinzugefügt wird, durchsucht der Browser das CSS-Stylesheet über die CSS-Engine, findet die zum Element passenden Stilregeln und wendet sie auf das Element an. Die CSS-Engine durchsucht das Stylesheet und gleicht jede Regel von rechts nach links ab.

Nachdem wir den Prozess verstanden haben, können wir erkennen, dass wir unseren CSS-Code unter zwei Gesichtspunkten optimieren können: 1. Je weniger CSS-Stilregeln definiert sind, desto besser. Löschen Sie daher unnötige Stildefinitionen schnell aus der CSS-Datei. 2. Optimieren Sie die Selektor-Schreibmethode jeder Regel und versuchen Sie, der CSS-Engine auf einen Blick mitzuteilen, ob diese Regel auf das aktuelle Element angewendet werden muss, damit die Engine unnötige Umwege vermeiden kann.

Im Folgenden sind beispielsweise einige ineffiziente Möglichkeiten zum Schreiben von CSS aufgeführt:

a, Platzhalter als Schlüsselselektoren verwenden (Schlüsselselektoren beziehen sich auf die äußersten rechten Selektoren jeder Regel)

b. Verwenden Sie Beschriftungen als Schlüsselselektoren

c, überflüssiges Schreiben

d. Fügen Sie die Pseudoklasse :hover zu Nicht-Link-Tags hinzu. Dadurch werden Seiten mit striktem Doctype in IE7 und IE8 sehr langsam.

Optimierungsvorschläge:
a. Vermeiden Sie die Verwendung von Platzhaltern.
b. Lassen Sie die CSS-Engine schnell erkennen, ob die Regel auf das aktuelle Element zutrifft: Verwenden Sie mehr ID- oder Klassenselektoren und weniger Tag-Selektoren.
c. Schreiben Sie „ID“ und „Klasse“ oder „Tag“ und „Klasse“ nicht zusammen.
d. Vermeiden Sie möglichst die Verwendung von Nachkommenselektoren und entfernen Sie unnötige Vorgängerelemente. Erwägen Sie die Verwendung von Klassenselektoren anstelle von Nachkommenselektoren.

e. Vermeiden Sie das Hinzufügen der Pseudoklasse :hover zu nicht verbundenen Tags.

Zweitens: Vermeiden Sie die Verwendung von CSS-Ausdrücken

CSS-Ausdrücke funktionieren nur in IE-Browsern. Microsoft empfiehlt ihre Verwendung seit IE8 nicht mehr, da sie die Seitenleistung erheblich beeinträchtigen können: Der CSS-Ausdruck wird jederzeit neu berechnet, unabhängig davon, welches Ereignis ausgelöst wird, z. B. Fenstergrößenänderungsereignisse, Mausbewegungen usw.

3. Platzieren Sie die CSS-Datei oben auf der Seite

Das Platzieren externer oder Inline-Stylesheets im Body-Abschnitt beeinträchtigt die Geschwindigkeit der Seitendarstellung, da der Browser mit dem Herunterladen der restlichen Seite erst fortfährt, wenn alle Stylesheets heruntergeladen wurden. Darüber hinaus können Inline-Stylesheets (Stile, die in <style> platziert sind) dazu führen, dass die Seite neu gerendert wird oder bestimmte Elemente auf versteckten Seiten angezeigt werden. Es wird empfohlen, keine Inline-Stylesheets zu verwenden.

Viertens: Geben Sie die Größe des Seitenbildes an

Die angegebene Seitenbildgröße sollte der tatsächlichen Größe des Bildes entsprechen (skalieren Sie das Bild nicht durch Angabe der Größe). Dadurch können durch Größenänderungen verursachte Änderungen der Seitenstruktur vermieden werden, was sich positiv auf die Seitendarstellung auswirkt.

5. Geben Sie den Dokumentcode im Seitenkopf an

HTML-Dokumente werden in Form eines Datenstroms, der Dokumentcodierungsinformationen enthält, über das Netzwerk übertragen. Die Kodierungsinformationen der Seite werden im Allgemeinen in den Header-Informationen der HTTP-Antwort oder im HTML-Tag innerhalb des Dokuments angegeben. Der Client-Browser kann die Seite erst dann richtig rendern, wenn er die Seitenkodierung ermittelt hat. Daher puffern die meisten Browser (außer IE6, IE7 und IE8) vor dem Zeichnen der Seite oder dem Ausführen von JavaScript-Code eine bestimmte Anzahl von Datenbytes, um die Kodierungsinformationen zu finden. Die Anzahl der vorgepufferten Bytes ist in verschiedenen Browsern unterschiedlich. Wenn der Browser nach dem Empfang der festgelegten Menge vorgepufferter Daten die Kodierungsinformationen der Seite nicht finden kann, beginnt er mit dem Rendern der Seite gemäß seiner eigenen angegebenen Standardkodierung. Wenn die Seitenkodierungsinformationen zu diesem Zeitpunkt abgerufen werden und nicht mit der aktuellen Kodierung übereinstimmen, muss die gesamte Seite neu gerendert werden. In einigen Fällen ist sogar ein erneuter Abruf der Daten erforderlich. Daher sollten bei Seiten mit einer Größe von über 1 KB (laut Tests mit verschiedenen Browsern beträgt die maximale Menge vorgepufferter Daten 1 KB) die Kodierungsinformationen so früh wie möglich markiert werden.

Optimierungsvorschläge:
a. Versuchen Sie, den Seitencode in den HTTP-Header-Informationen anzugeben (dies muss serverseitig eingestellt werden). Wenn Browser wie Firefox die Kodierungsinformationen im HTTP-Header erhalten, puffern sie weniger Daten vor und reduzieren so unnötige Datenpufferungszeit.
b. Geben Sie die Kodierungsinformationen im Abschnitt <head> des HTML an.
c. Gewöhnen Sie sich an die Zuweisung von Kodierungen zu Dokumenten.
d. Die für die Seite angegebene Kodierung muss mit der tatsächlichen Kodierung der Seite übereinstimmen. Wenn Sie die Kodierung sowohl in den HTTP-Headerinformationen als auch im HTML-Tag angeben, stellen Sie sicher, dass die Kodierungsinformationen konsistent sind.

Hinweis: Der Artikel ist nicht vollständig entsprechend der ursprünglichen Bedeutung des Google-Dokuments übersetzt. Der übersetzte Text wird in Kombination mit meinem eigenen Verständnis ausgedrückt. Wenn Sie Fehler finden, danken wir Ihnen für die Korrektur.