Wie funktioniert eine Webseite: Eine schrittweise Aufschlüsselung?

Ausführungssequenz einer Webseite

Beim Empfang einer Antwort für eine Webseite initiiert der Browser die folgende Ausführungssequenz:

1. HTML-Laden

Der Browser lädt das HTML-Dokument herunter, analysiert es und erstellt das Document Object Model (DOM).

2. Abruf externer Ressourcen

Von oben nach unten beginnend lädt der Browser parallel externe Ressourcen (Skripte, CSS, Bilder).

3. JavaScript-Ausführung

Extern (synchron): Der Browser lädt externe JavaScript-Dateien herunter, analysiert sie und führt sie sofort aus, wodurch die HTML-Analyse blockiert wird.
Extern (asynchron) : Moderne Browser verwenden möglicherweise nicht blockierende Ladetechniken, die es ermöglichen, die HTML-Analyse fortzusetzen, während externe Dateien geladen und ausgeführt werden Skripte.
Inline:Inline-JavaScript wird innerhalb des HTML-Parsing-Prozesses ausgeführt.

4. CSS-Ausführung

Der Browser lädt CSS-Regeln herunter, analysiert sie und wendet sie an, sobald er sie im HTML findet.

5. Ereignis „Dokument bereit“

Sobald alle DOM-Elemente und externen Ressourcen geladen und analysiert wurden, löst der Browser das Ereignis „Dokument bereit“ aus, normalerweise $(document).ready().

6. Weitere JavaScript-Ausführung

JavaScript-Code, der nach dem Ereignis „Dokument bereit“ ausgeführt wird, setzt die Ausführung fort.

7. Bild-Download

Der Browser lädt Bilder und andere Medienressourcen gemäß den Spezifikationen im HTML herunter.

Um Ihre spezifischen Fragen zu beantworten:

1. Die Seite lädt von oben nach unten und lädt parallel externe Ressourcen.
2. Die Ladereihenfolge ist: HTML -> Externe Ressourcen -> JavaScript -> CSS -> Ereignis „Dokument bereit“ -> Weiteres JavaScript -> Bild-Download.
3. Inline-JavaScript: Während der HTML-Analyse. Externes JavaScript (synchron): Blockiert die HTML-Analyse. Externes JavaScript (asynchron): Lädt weiterhin HTML.
4. CSS: Wird angewendet, wie es im HTML vorkommt.
5. $(document).ready: Wird ausgelöst, nachdem alle DOM-Elemente und Ressourcen geladen wurden.
6. Nur ​​kkk.png wird heruntergeladen und ersetzt das Original Bild.

Hinweis:

Die Ausführungsreihenfolge kann je nach Browsereinstellungen (z. B. Limits für parallele Anfragen) und Caching-Mechanismen leicht variieren. Eine detaillierte Beschreibung des Lade- und Ausführungsprozesses des Browsers finden Sie unter: https://browser.engineering/ (Open-Source: https://github.com/browserengineering/book).

Das obige ist der detaillierte Inhalt vonWie funktioniert eine Webseite: Eine schrittweise Aufschlüsselung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!