Wie CSS die Zeit des weißen Bildschirms während des ersten Ladens beeinflusst

Rendering-Pipeline mit externen CSS-Dateien

In der obigen Abbildung gibt es eine Leerlaufzeit zwischen der Anforderung der HTML-Daten und dem Erstellen des DOM, die zu einem Engpass bei der Seitendarstellung werden kann. Nachdem das DOM erstellt wurde, wartet die Rendering-Pipeline, bis die CSS-Datei heruntergeladen ist, da der nächste Schritt darin besteht, den Layoutbaum zu synthetisieren. Der zusammengesetzte Layoutbaum erfordert CSSOM und DOM. Sie müssen also warten, bis das CSS geladen und in CSSOM analysiert wurde. In diesem Fall blockiert das CSS die Generierung des DOM nicht.

Die Rolle von CSSOM

• Bietet JS die Möglichkeit, Stylesheets zu manipulieren
• Bietet grundlegende Stilinformationen für die Layoutbaumsynthese

Rendering-Pipeline für Seiten mit Inline-JS und externem CSS

Wie aus der obigen Abbildung ersichtlich ist, wird beim Auftreten von JS während der DOM-Konstruktion die Konstruktion gestoppt und JS analysiert und ausgeführt, da JS das aktuelle DOM ändern kann.

Wenn die Seite externes CSS oder Inline-CSS enthält, muss die Rendering-Engine diese vor der Ausführung des JS-Skripts in CSSOM konvertieren. Da JS CSSOM ändern kann, ist es vor der Ausführung von JS auch von CSSOM abhängig. Dies bedeutet, dass CSS in einigen Fällen auch die DOM-Generierung blockiert.

Rendering-Pipeline für Seiten mit externem JS und CSS

Während des Vorparsing-Prozesses der angeforderten HTML-Daten wird erkannt, dass externe JS- und CSS-Dateien heruntergeladen werden müssen. Die Downloadanforderungen für die beiden Dateien werden gleichzeitig initiiert. Die Downloadzeiten überschneiden sich nicht, sondern werden auf Grundlage der längsten Datei berechnet.

Unabhängig davon, was zuerst eintrifft, CSS oder JS, müssen Sie zunächst warten, bis die CSS-Datei heruntergeladen und CSSOM generiert wurde, dann das JS-Skript ausführen und schließlich das DOM und den Layoutbaum erstellen und die Seite zeichnen.

Faktoren, die die Seitenanzeige und Optimierungsstrategien beeinflussen

Von der Eingabe der URL bis zur ersten Anzeige der Seite gibt es drei Schritte:

1. Nachdem die Anfrage gesendet wurde, wird beim Schritt der Datenübermittlung auf der Seite immer noch der Inhalt der vorherigen Seite angezeigt.
2. Nach dem Senden der Daten erstellt der Rendervorgang eine leere Seite. Dieser Zeitraum wird als Parsen des weißen Bildschirms bezeichnet. Es wird gewartet, bis das Laden der CSS- und JS-Dateien abgeschlossen ist, CSSOM und DOM generiert und dann der Layoutbaum, XXX und andere Schritte synthetisiert, um das erste Rendern vorzubereiten.
3. Nachdem das erste Rendering abgeschlossen ist, beginnt die vollständige Seitengenerierungsphase und die Seite wird Stück für Stück gezeichnet.

Die zweite Phase hat den größten Einfluss auf das Benutzererlebnis und umfasst das Parsen von HTML, das Herunterladen von CSS, das Herunterladen von JavaScript, das Generieren von Layoutbäumen, das Zeichnen von Seiten und andere Vorgänge.

Optimierungsstrategie

1. Integrieren Sie CSS und JS und beginnen Sie direkt mit dem Rendern, nachdem das HTML heruntergeladen wurde.
2. Um die Dateigröße zu minimieren, entfernt webpack Kommentare und komprimiert Dateien.
3. Markieren Sie einige JS, die in der HTML-Analysephase nicht verwendet werden müssen, mit „async“ oder „defer“.
4. Bei großen CSS-Dateien können Sie Medienabfragen verwenden, um sie in CSS-Dateien für verschiedene Zwecke aufzuteilen und sie nur in bestimmten Szenarien zu laden.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.