Wie lädt und führt ein Webbrowser den Inhalt einer Webseite aus?

Lade- und Ausführungssequenz einer Webseite Übersicht

Wenn eine Webseite angefordert wird, führt der Browser eine aus Reihe von Aufgaben zum Laden und Ausführen des Inhalts. Dazu gehört die Verarbeitung des HTML-Dokuments, das Abrufen und Ausführen externer Ressourcen und das Rendern der Seite.

Sequenz des Ladens HTML-Dokument: Der Browser lädt den HTML-Code herunter Dokument und beginnt mit der Analyse. Inline-Ressourcen (Skripte und Stile): Wenn der Browser auf Inline- und Tags werden analysiert und sofort ausgeführt. Externe Ressourcen (Skripte und CSS): Externe Skriptdateien ( ) werden heruntergeladen und analysiert , und hingerichtet. Externe CSS-Dateien ( ) werden heruntergeladen und auf die Seite angewendet. Bilder und andere Inhalte: Der Browser gleichzeitig lädt Bilder und andere im HTML-Dokument angegebene Ressourcen herunter. Ausführung von JavaScript Inline-JavaScript: Inline-JavaScript wird sofort nach der Analyse ausgeführt.

Externes JavaScript:

Blockierung: Wenn ein externes Skript mit „defer“ oder „async“ markiert ist, lädt der Browser es herunter und führt es aus, bevor er fortfährt Analysieren Sie den HTML-Code. Nicht blockierend: Wenn ein externes Skript mit „Laden“ markiert ist, lädt der Browser es herunter und führt es asynchron aus, ohne die HTML-Analyse zu blockieren. Ausführung von CSS CSS wird auf die Seite angewendet, wie es im vorkommt. oder Link-Tags. Änderungen an CSS, nachdem die Seite analysiert und gerendert wurde, aktualisieren das Erscheinungsbild der Seite dynamisch. Zeitpunkt von $(document).ready Die Funktion $(document).ready wird ausgeführt, wenn alle HTML-Elemente und externen Ressourcen geladen und ausgeführt wurden. Dadurch wird sichergestellt, dass der JavaScript-Code sicher mit den Elementen der Seite interagieren kann.

Bild-Download abc.jpg wird heruntergeladen, wenn es zum ersten Mal auf der Seite angezeigt wird. kkk.png wird heruntergeladen und ersetzt abc.jpg im Element, da es mithilfe von JavaScript dynamisch festgelegt wird. Variationen zwischen Browsern Die Lade- und Ausführungssequenz kann zwischen verschiedenen Browsern leicht variieren, aber die allgemeinen Prinzipien bleiben gleich.

Referenzen [Browser Engineering Book](https://browser.engineering/) [JavaScript-Ausführungsreihenfolge in Webseiten](https://developer.mozilla .org/en-US/docs/Web/HTML/Element/script) [Seitenlebenszyklus in Browsern](https://addyosmani.com/blog/page-lifecycle-in-browsers/)