Lassen Sie uns im Detail darüber sprechen, wie JavaScript den Aufbau des DOM-Baums beeinflusst

Dokumentobjektmodell (DOM)

Das Document Object Model (DOM) verbindet eine Webseite mit einem Skript oder einer Programmiersprache. Das DOM-Modell stellt ein Dokument mit einem logischen Baum dar. Jeder Zweig des Baums endet an einem Knoten und jeder Knoten enthält Objekte. DOM-Methoden ermöglichen den programmgesteuerten Zugriff auf den Baum und ändern so die Struktur, den Stil und den Inhalt des Dokuments. Knoten können mit Ereignishandlern verknüpft werden, die ausgeführt werden, sobald ein Ereignis ausgelöst wird.
Der vom Netzwerk an die Rendering-Engine übertragene HTML-Datei-Bytestream kann von der Rendering-Engine nicht direkt verstanden werden. Daher muss er in eine interne Struktur konvertiert werden, die die Rendering-Engine verstehen kann. Diese Struktur ist das DOM. DOM bietet eine strukturierte Darstellung von HTML-Dokumenten. In der Rendering-Engine verfügt DOM über drei Funktionsebenen:

• Aus Sicht der Seite ist DOM die grundlegende Datenstruktur zur Seitengenerierung.
• Aus der Perspektive von JavaScript-Skripten stellt DOM eine Schnittstelle für JavaScript-Skriptvorgänge bereit. Über diese Schnittstelle kann JavaScript auf die DOM-Struktur zugreifen, um Struktur, Stil und Inhalt des Dokuments zu ändern.
• Aus Sicherheitsperspektive stellt DOM eine Sicherheitsverteidigungslinie dar und einige unsichere Inhalte werden während der DOM-Analysephase blockiert.

Kurz gesagt ist DOM die interne Datenstruktur, die HTML darstellt. Es verbindet Webseiten und JavaScript-Skripte und filtert unsichere Inhalte heraus.

DOM und JavaScript

DOM ist keine Programmiersprache, aber ohne DOM hätte die Sprache JavaScript kein Konzept oder Modell von Webseiten, XML-Seiten und den beteiligten Elementen. Jedes Element in einem Dokument – ​​einschließlich des gesamten Dokuments, der Dokumentkopfzeile, der Tabellen im Dokument, der Tabellenköpfe und des Textes in den Tabellen – ist Teil des Document Object Model (DOM), zu dem das Dokument gehört. Daher kann auf sie mithilfe des DOM und einer Skriptsprache wie JavaScript zugegriffen und sie können bearbeitet werden.

Ursprünglich waren JavaScript und DOM miteinander verflochten, entwickelten sich jedoch schließlich zu zwei getrennten Einheiten. JavaScript kann auf im DOM gespeicherte Inhalte zugreifen und diese bearbeiten, daher können wir diese ungefähre Gleichung schreiben:

API (Web- oder XML-Seite) = DOM + JS (Skriptsprache)

DOM und JavaScript

So wird der DOM-Baum generiert

Innerhalb der Rendering-Engine gibt es ein Modul namens HTML-Parser, dessen Aufgabe es ist, den HTML-Bytestream in eine DOM-Struktur zu konvertieren.
Der HTML-Parser wartet nicht, bis das gesamte Dokument geladen ist, bevor er mit der Analyse beginnt. Stattdessen führt er die Analyse durch, während das HTML-Dokument geladen wird. Der HTML-Parser analysiert so viele Daten, wie der Netzwerkprozess lädt.

Prozess: Nachdem der Netzwerkprozess den Antwortheader empfangen hat, bestimmt er den Dateityp basierend auf dem Feld „content-type“ im Antwortheader. Wenn der Wert des Inhaltstyps beispielsweise „text/html“ lautet, bestimmt der Browser, dass es sich um eine Datei vom Typ HTML handelt, wählt basierend auf dieser Beurteilung die entsprechende Analyse-Engine aus und wählt oder erstellt dann einen Rendering-Prozess für die Anforderung. Nachdem der Rendering-Prozess abgeschlossen ist, wird zwischen dem Netzwerkprozess und dem Rendering-Prozess eine gemeinsam genutzte Datenpipeline eingerichtet. Nachdem der Netzwerkprozess die Daten empfangen hat, legt er sie in diese Pipeline ein, und der Rendering-Prozess liest kontinuierlich Daten vom anderen Ende der Pipeline und sendet die gelesenen Daten gleichzeitig an den HTML-Parser.

Sie können sich diese Pipeline als eine „Wasserleitung“ vorstellen. Der vom Netzwerkprozess empfangene Bytestrom fließt wie Wasser in diese „Wasserleitung“, und das andere Ende der „Wasserleitung“ ist der HTML-Parser des Rendering-Prozesses, der den Bytestrom dynamisch empfängt und in DOM analysiert.

Wie aus der Abbildung ersichtlich, erfordert die Konvertierung des Bytestreams in DOM drei Schritte.

Drei Phasen der HTML-Analyse

Im ersten Schritt wird der Bytestrom durch einen Tokenizer in Token umgewandelt.

Das Parsen von HTML funktioniert genauso. Sie müssen den Bytestream über einen Tokenizer in Token umwandeln, die wiederum in Tag-Token und Text-Token unterteilt werden. Das durch die lexikalische Analyse des HTML-Codes generierte Token wird in der folgenden Abbildung dargestellt:

Wie aus der Abbildung ersichtlich, ist das Tag-Token in StartTag und EndTag unterteilt.

Der zweite Schritt besteht darin, das Token in einen DOM-Knoten zu parsen

Der HTML-Parser verwaltet eine Token-Stapelstruktur, die hauptsächlich zur Berechnung der Eltern-Kind-Beziehung zwischen Knoten verwendet wird. Die im ersten Schritt generierten Token werden der Reihe nach in diesen Stapel verschoben. Die spezifischen Verarbeitungsregeln lauten wie folgt:

• Wenn das StartTag-Token in den Stapel geschoben wird, erstellt der HTML-Parser einen DOM-Knoten für das Token und fügt den Knoten dann dem DOM-Baum hinzu. Sein übergeordneter Knoten ist der Knoten, der vom benachbarten Element im Stapel generiert wird.
• Wenn der Tokenizer ein Texttoken analysiert, wird ein Textknoten generiert und dann dem DOM-Baum hinzugefügt. Das Texttoken muss nicht in den Stapel geschoben werden, und sein übergeordneter Knoten ist der DOM-Knoten, der dem aktuellen obersten Token des Stapels entspricht.
• Wenn der Tokenizer ein EndTag-Tag wie EndTag div analysiert, prüft der HTML-Parser, ob das oberste Element des Token-Stapels ein StarTag div ist. Wenn ja, wird das StartTag div aus dem Stapel entfernt, was anzeigt, dass die Analyse des div-Elements abgeschlossen ist.

Die vom Tokenizer generierten neuen Token werden kontinuierlich gepusht und gepoppt, und der gesamte Analysevorgang wird fortgesetzt, bis der Tokenizer die Tokenisierung aller Byte-Streams abgeschlossen hat.

Die dritte Phase besteht darin, dem DOM-Baum DOM-Knoten hinzuzufügen

Fügen Sie dem Dokument den erstellten DOM-Knoten hinzu, um einen DOM-Baum zu bilden.

Detaillierte Erklärung des HTML-Parsing-Prozesses

Wenn der HTML-Parser mit der Arbeit beginnt, erstellt er standardmäßig eine leere DOM-Struktur mit dem Dokument als Stamm und schiebt ein StartTag-Dokument-Token an das Ende des Stapels. Anschließend wird das erste vom Tokenizer analysierte StartTag-HTML-Token in den Stapel verschoben und ein HTML-DOM-Knoten erstellt und dem Dokument hinzugefügt, wie in der folgenden Abbildung dargestellt.

Anschließend werden der StartTag-Body und das StartTag-Div nach demselben Verfahren analysiert. Der Status des Token-Stacks und des DOM wird in der folgenden Abbildung angezeigt:

Als nächstes wird das Texttoken des ersten Div analysiert. Die Rendering-Engine erstellt einen Textknoten für das Token und fügt das Token dem DOM hinzu. Sein übergeordneter Knoten ist der Knoten, der dem obersten Element des aktuellen Tokenstapels entspricht, wie in der folgenden Abbildung dargestellt:

Als nächstes analysiert der Tokenizer das erste EndTag-Div. Zu diesem Zeitpunkt ermittelt der HTML-Parser, ob das Element oben im Stapel ein StartTag-Div ist. Wenn dies der Fall ist, wird das StartTag-Div vom oberen Rand des Stapels entfernt, wie in der folgenden Abbildung dargestellt.

Nach den gleichen Regeln wird das Endergebnis in der folgenden Abbildung angezeigt:

Durch die obige Einführung wissen Sie meiner Meinung nach bereits, wie DOM generiert wird. In einer tatsächlichen Produktionsumgebung enthält die HTML-Quelldatei jedoch nicht nur CSS und JavaScript, sondern auch Bilder, Audio-, Video- und andere Dateien, sodass der Verarbeitungsprozess viel komplizierter ist als in der obigen Demo. Nachdem wir diesen einfachen Demo-Generierungsprozess verstanden haben, können wir jedoch komplexere Szenarien analysieren.

Wie JavaScript die DOM-Generierung beeinflusst

Wenn die Seite ein JavaScript-Skript enthält oder eine Skriptdatei importiert, unterscheidet sich der Analysevorgang dieses Skripts geringfügig vom obigen Vorgang.
Vor dem Skript-Tag sind alle Analyseprozesse dieselben wie zuvor beschrieben. Beim Analysieren bis zum Skript-Tag stellt die Rendering-Engine jedoch fest, dass es sich um ein Skript handelt. Zu diesem Zeitpunkt unterbricht der HTML-Parser die DOM-Analyse und die JavaScript-Engine greift ein, da das JavaScript-Skript möglicherweise die aktuell generierte DOM-Struktur ändern muss.

Wenn das Skript über eine JavaScript-Datei geladen wird, muss zuerst der JavaScript-Code heruntergeladen werden. Hier müssen wir der Download-Umgebung besondere Aufmerksamkeit schenken, da der Download-Prozess von JavaScript-Dateien die DOM-Analyse blockiert und das Herunterladen normalerweise sehr zeitaufwändig ist und von Faktoren wie der Netzwerkumgebung und der Größe der JavaScript-Datei beeinflusst wird.

Handelt es sich bei dem Skript um ein direkt eingebettetes JavaScript-Skript, wird es direkt ausgeführt.

Wenn das JavaScript-Skript den Inhalt des Div im DOM ändert, wird nach der Ausführung des Skripts auch der Inhalt des analysierten Div-Knotens geändert. Nachdem das Skript ausgeführt wurde, nimmt der HTML-Parser den Analysevorgang wieder auf und analysiert den nachfolgenden Inhalt weiter, bis das endgültige DOM generiert ist.

Eine andere Situation ist, dass beim Auftreten von JavaScript-Code die Anweisung, die den CSS-Stil der Seite ändert, zum Bearbeiten des CSSOM verwendet wird. Daher müssen vor der Ausführung von JavaScript zuerst alle CSS-Stile über der JavaScript-Anweisung analysiert werden. Wenn im Code auf eine externe CSS-Datei verwiesen wird, müssen Sie daher vor der Ausführung von JavaScript warten, bis die externe CSS-Datei heruntergeladen und analysiert wurde, um ein CSSOM-Objekt zu generieren, bevor Sie das JavaScript-Skript ausführen.

Vor dem Parsen des JavaScript-Codes weiß die JavaScript-Engine nicht, ob JavaScript CSSOM manipuliert. Wenn die Rendering-Engine also auf ein JavaScript-Skript stößt, lädt sie die CSS-Datei herunter, analysiert sie und führt dann das JavaScript-Skript aus, unabhängig davon, ob das Skript CSSOM manipuliert. Daher sind JavaScript-Skripte auf Stylesheets angewiesen.

Durch die obige Analyse wissen wir, dass JavaScript die DOM-Generierung blockiert und Style-Dateien die JavaScript-Ausführung blockieren. Daher müssen wir in tatsächlichen Projekten auf JavaScript-Dateien und Stylesheet-Dateien achten. Eine unsachgemäße Verwendung beeinträchtigt die Seitenleistung.

Optimierung beim Parsen

Um das Blockieren von Seiten zu verhindern, wurden im Chrome-Browser zahlreiche Optimierungen vorgenommen. Eine der wichtigsten Optimierungen ist der Vorabanalysevorgang. Wenn die Rendering-Engine den Bytestream empfängt, startet sie einen Pre-Parsing-Thread, um JavaScript, CSS und andere zugehörige Dateien in der HTML-Datei zu analysieren. Nach dem Parsen der zugehörigen Dateien lädt der Pre-Parsing-Thread diese Dateien im Voraus herunter.

Zurück zur DOM-Analyse: Wir wissen, dass die Einführung von JavaScript-Threads DOM blockiert, es gibt jedoch einige entsprechende Strategien, um dies zu vermeiden, z. B. die Verwendung von CDN, um das Laden von JavaScript-Dateien zu beschleunigen und die Größe von JavaScript-Dateien zu komprimieren. Wenn die JavaScript-Datei keinen DOM-bezogenen Code enthält, können Sie außerdem festlegen, dass das JavaScript-Skript asynchron geladen wird, indem Sie den Code mit „async“ oder „defer“ markieren. Die Verwendung ist wie folgt:

<script async type="text/javascript" src='foo.js'></script>

<script defer type="text/javascript" src='foo.js'></script>

Obwohl sowohl „async“ als auch „defer“ asynchron sind, gibt es einige Unterschiede. Sobald die mit „async“ markierte Skriptdatei geladen ist, wird sie sofort ausgeführt; während die mit „defer“ markierte Skriptdatei vor dem Ereignis „DOMContentLoaded“ ausgeführt werden muss.

Zusammenfassen

Zuerst haben wir erläutert, wie DOM generiert wird. Anschließend haben wir basierend auf dem DOM-Generierungsprozess analysiert, wie sich JavaScript auf die DOM-Generierung auswirkt. Es wird auch erwähnt, dass sowohl CSS als auch JavaScript die DOM-Generierung beeinflussen.

DOM-Generierungsprozess

Zum Parsen von HTML muss der Bytestrom durch einen Tokenizer in Token umgewandelt werden.

Wenn das StartTag-Token in den Stapel geschoben wird, erstellt der HTML-Parser einen DOM-Knoten für das Token und fügt den Knoten dann zum DOM-Baum hinzu. Wenn der Tokenizer ein Texttoken analysiert, wird ein Textknoten generiert und dann zum DOM-Baum hinzugefügt. Wenn der Tokenizer das EndTag-Tag analysiert, prüft der HTML-Parser, ob das oberste Element des Token-Stapels das StarTag-Div ist. Wenn dies der Fall ist, wird das StartTag-Div aus dem Stapel entfernt, was anzeigt, dass die Analyse des Div-Elements abgeschlossen ist.

Die vom Tokenizer generierten neuen Token werden kontinuierlich gepusht und gepoppt, und der gesamte Analysevorgang wird fortgesetzt, bis der Tokenizer die Tokenisierung aller Byte-Streams abgeschlossen hat.

Wenn während des Analysevorgangs JavaScript-Code gefunden wird, wird die HTML-Analyse gestoppt. Wenn JS über ein Skript geladen wird, wird das Skript zuerst heruntergeladen und dann ausgeführt. Vor der Ausführung wird auch CSS analysiert, um CSSOM zu generieren. Dieser Vorgang wird fortgesetzt, bis der gesamte DOM erstellt ist.

Dies ist das Ende dieses Artikels darüber, wie JavaScript die DOM-Baumkonstruktion beeinflusst. Weitere relevante Inhalte zur JavaScript-DOM-Baumkonstruktion finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!