Fallstudie zum JavaScript DOMContentLoaded-Ereignis

DOMContentLoaded-Ereignis

Es wird buchstäblich ausgelöst, nachdem das DOM geladen wurde.

Sehr ähnlich dem window.onload-Ereignis, aber mit einigen Unterschieden:

1. Das Ereignis „DOMContentLoaded“ wird ausgelöst, nachdem das Dokument vollständig geladen und analysiert wurde.
2. Das Ereignis window.onload schließt nicht nur das Laden und Analysieren des Dokuments ab, sondern auch das Laden zugehöriger Ressourcen wie Bilder und CSS-Dateien.

Die nächste Frage ist, wann das DOM geladen wird. Dies beginnt mit dem Rendern im Browser. Der Vorgang, bei dem der Browser eine Webseite anzeigt, kann wie folgt beschrieben werden:

1. Fordern Sie ein HTML-Dokument an und fordern Sie dann basierend auf dem Dokument weitere IMG-, CSS- und andere Ressourcendateien an.

2. Analysieren Sie das Dokument, um zwei Dinge zu erhalten: DOM-Baum und CSS-Baum.

3. Generieren Sie einen Renderbaum basierend auf den beiden obigen Bäumen.

4. Führen Sie das Layout gemäß dem Renderbaum durch und zeichnen Sie die zugehörigen Elemente darin.

Am Beispiel von WebKit sieht der Rendering-Prozess wie folgt aus:

Das Ereignis „DOMContentLoaded“ wird in folgenden Fällen ausgelöst:

Nach DOM und vor RENDERtree.

Das Laden und Ausführen von JavaScript verzögert das Auslösen des Ereignisses DOMContentLoaded.

JavaScript muss warten, bis die CSS-Wiedergabe abgeschlossen ist, bevor es geladen und ausgeführt werden kann, da der Browser nicht feststellen kann, ob JavaScript DOM-Elementinformationen benötigt.

Um sicherzustellen, dass JavaScript über die neuesten Informationen verfügt, wird zuerst das CSS geladen und gerendert.

Referenzdokumente:

http://www.softwh.com/article-9783-1.html

https://www.cnblogs.com/CandyManPing/p/6635008.html

https://www.cnblogs.com/caizhenbo/p/6679478.html

Dies ist das Ende dieses Artikels über den detaillierten Fall des JavaScript DOMContentLoaded-Ereignisses. Weitere relevante Inhalte zum JavaScript DOMContentLoaded-Ereignis 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!