Wie JavaScript im Browser geladen wird

So laden Sie JavaScript im Browser: 1. Analysieren Sie die Webseite. 2. Führen Sie externes CSS über ein Skript ein. 4. Erstellen Sie einen Thread für das asynchrone Laden Analysieren Sie das Dokument. 6. Führen Sie Verzögerungsskripte nacheinander aus. 7. Konvertieren Sie es in eine ereignisgesteuerte Phase usw.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Dell G3-Computer, Javascript-Version 1.8.5.

Heute werde ich mit Ihnen über den Ladevorgang in JavaScript sprechen. Er hat einen gewissen Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Das Laden von JavaScript beginnt von dem Moment an, in dem es beginnt Bis alles der Reihe nach abgeschlossen ist, können die ungefähren Schritte in Erstellen des Dokumentobjekts ==> Dokumentparsing abgeschlossen ==> Laden und Ausführen des Dokuments unterteilt werden, was im Artikel ausführlich vorgestellt wird.

Ladevorgang

(1) Beim Parsen der Webseite werden HTML-Elemente und deren Textinhalt analysiert, Bilder und Text zum Dokument hinzugefügt und das Dokument wird als Medium geladen

Dokumentanalyse

(2) Führen Sie externes CSS über einen Link ein, erstellen Sie Threads und führen Sie asynchrones Laden durch.

(3) Führen Sie externe js über ein Skript ein und stellen Sie nicht „async“ oder „defer“ ein. Der Browser lädt synchron und blockiert usw.

(4) Warten Sie, bis js geladen ist, und stellen Sie dann „async“ ein und verzögern Sie dafür. Der Browser erstellt einen Thread für asynchrones Laden, in dem async sofort nach dem Laden des Skripts ausgeführt wird (Hinweis: asynchrones Laden sollte die Verwendung von document.write() verhindern)

(5 ) Wenn Sie auf Attribute mit src wie img stoßen, sollte die Dom-Struktur zuerst normal analysiert werden. Anschließend lädt der Browser den src asynchron und analysiert das Dokument weiter. Wenn ein Tag angezeigt wird, wird der Dom-Baum direkt generiert, ohne zu warten damit das IMG den SCR lädt.

(6) Nachdem die Dokumentanalyse abgeschlossen ist, werden alle mit „Defer“ festgelegten Skripte der Reihe nach ausgeführt. (Beachten Sie den Unterschied zu async, aber die Verwendung von document.write() ist ebenfalls verboten);

(7) Das Dokumentobjekt löst das DOMContentLoaded-Ereignis aus, das auch die Transformation der Programmausführung vom synchronen Skript markiert Von der Ausführungsphase zur ereignisgesteuerten Phase.

(8) Wenn alle asynchronen Skripte geladen und ausgeführt werden und img usw. geladen werden (nachdem alle Seiten geladen wurden), ist document.readyState = 'complete' und das Fensterobjekt löst das Ladeereignis aus.

(9) Von nun an werden Benutzereingaben, Netzwerkereignisse usw. in einer asynchronen Antwortweise verarbeitet

Hinweis

Das ist so Wenn wir ein Programm schreiben, ist es am besten, das Skript-Tag unten zu schreiben. Obwohl es nicht nur möglich ist, das Div zu bearbeiten, sondern es auch unmittelbar nach dem Parsen des Doms zu verarbeiten, ist es am besten, es zu schreiben unten

<div style="width:100px;height:100px;background: pink;">
<script>
var div=document.getElementsByTagName("div")[0]
div.onclick=function(){
this.style.background="hotpink";
}
</script>

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass jeder durch diesen Artikel ein gewisses Verständnis für das Laden von JavaScript hat.

Das obige ist der detaillierte Inhalt vonWie JavaScript im Browser geladen wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!