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:

> 　

...