Verstehen Sie den Rendering-Prozess von HTML-Seiten als Vorbereitung für das Erlernen der Front-End-Leistungsoptimierung_HTML/Xhtml_Webseitenproduktion

Vor Kurzem lerne ich über die Optimierung der Front-End-Leistung. Es ist notwendig, den Seitenrendering-Prozess zu verstehen, um die richtige Medizin zu verschreiben und den Leistungsengpass herauszufinden. Hier sind einige Dinge, die ich gesehen habe, um sie mit Ihnen zu teilen.
Referenz: Den Renderer verstehen
Das Rendering der Seite weist die folgenden Merkmale auf:
•Einzelthread-Ereignisabfrage
•Gut definierte, kontinuierliche, geordnete Vorgänge (HTML5 )
•Wortsegmentierung und Erstellen eines DOM-Baums
•Anfordern von Ressourcen und Vorladen
•Erstellen eines Rendering-Baums und Zeichnen der Seite
Konkret:
Wenn wir HTML von der erhalten Netzwerk Wenn die entsprechenden Bytes erreicht sind, beginnt der Aufbau des DOM-Baums. Verantwortlich dafür ist der Thread des Browsers, der die Benutzeroberfläche aktualisiert. In den folgenden Situationen wird der Aufbau des DOM-Baums blockiert:
•Der HTML-Antwortstrom ist im Netzwerk blockiert
•Es ist ein entladenes Skript vorhanden
•Es wird ein Skriptknoten angetroffen, aber dieser Es sind noch ungeladene Stildateien vorhanden
Der Rendering-Baum wird aus dem DOM-Baum erstellt und wird durch die Stildateien blockiert.
Da es auf Single-Thread-Ereignisabfrage basiert, wird das Rendern der Seite blockiert, auch wenn keine Blockierung von Skripten und Stilen erfolgt, wenn diese Skripte oder Stile analysiert, ausgeführt und angewendet werden.
Einige Situationen, die das Rendern der Seite nicht blockieren:
• Definiertes Defer-Attribut und Async-Attribut
• Keine Style-Datei mit passendem Medientyp
• Fehler beim Übergeben des Parser-Einfügeskripts Knoten oder Stilknoten
Nachfolgend veranschaulichen wir dies anhand eines Beispiels (vollständiger Code) :

Kopieren Code

Der Code lautet wie folgt:

example.css">
　

Hallo!

　<script> <br>　document.write('<script src="other.js">&lt ; /scr' 'ipt>'); <br>　</script>
　

Hallo nochmal!

script>
Der Code ist leicht zu verstehen, und die gewünschte Seite wird sofort angezeigt. Als Nächstes verwenden wir die Zeitlupenwiedergabe, um zu sehen, wie es gerendert wird.

Code kopieren

Der Code lautet wie folgt:

> 　

...

Zuerst stößt der Parser auf example.css und lädt es aus dem Netzwerk herunter. Das Herunterladen des Stylesheets ist zeitaufwändig, der Parser wird jedoch nicht blockiert und führt die Analyse weiter aus. Als nächstes trifft der Parser auf das Skript-Tag, aber da die Stildatei nicht geladen ist, wird die Ausführung des Skripts blockiert. Der Parser ist blockiert und kann nicht weiter analysieren.

Der Rendering-Baum wird auch durch die Style-Datei blockiert, sodass zu diesem Zeitpunkt kein Browser die Seite rendern kann. Mit anderen Worten, wenn die Datei example.css nicht heruntergeladen werden kann, wird sie nicht angezeigt .
Als nächstes fahren Sie fort. . .

Code kopieren


Der Code lautet wie folgt:

>

　

document.write ('

Der Parser hat last.js gefunden, aber weil der Preloader es gerade geladen hat, platziert im Cache des Browsers, sodass last.js sofort ausgeführt wird. Anschließend erhält der Browser eine Rendering-Anfrage und auf der Seite wird „Hi again“ angezeigt.

Durch den Vergleich der beiden Situationen vorher und nachher hoffe ich, dass jeder ein gewisses Verständnis für das Rendern von Seiten erlangen und dann einige gezielte Optimierungen vornehmen kann. Gute Nacht! (Ende)^_^