Wie wird eine Webseite geladen und ausgeführt: Eine schrittweise Aufschlüsselung?

Aufschlüsselung des Ladens und Ausführens einer Webseite

Frage: Wie ist die Reihenfolge des Ladens und Ausführens einer Webseite? Seite?

Antwort:

1. HTML-Analyse:

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

2. Laden von Ressourcen:

• Externe Ressourcen werden parallel heruntergeladen:

  • JavaScript (externe Skripte)
  • CSS (externer Stil Blätter)
  • Bilder

3. JavaScript-Ausführung:

• Inline-JavaScript in <script> Tags werden ausgeführt.</script>
• Externe JavaScript-Dateien werden beim Herunterladen analysiert und ausgeführt.

4. CSS-Ausführung:

• Externe CSS-Dateien werden heruntergeladen und analysiert.
• CSS-Regeln werden auf die DOM-Elemente angewendet.

5. DOM-Änderungen:

• $(document).ready()-Ereignis wird ausgelöst, wenn das DOM bereit ist (alle Ressourcen geladen).
• Internes JavaScript (innerhalb von <script> Tags) wird ausgeführt und verändert möglicherweise das DOM.</script>

6. Ressourcenanzeige:

• Bilder und andere externe Ressourcen werden auf der Webseite angezeigt.

7. Zusätzliche JavaScript-Ausführung:

• Externe JavaScript-Dateien, die geladen werden, nachdem DOM bereit ist, werden weiterhin ausgeführt.

Bild-Download:

• Sowohl abc.jpg als auch kkk.png werden heruntergeladen.
• Das Bild wird in angezeigt Das Das Element wird kkk.png sein, da sein src-Attribut durch den JavaScript-Code aktualisiert wird.

Browser-Ausführungsablauf:

Die Reihenfolge des Ladens und der Ausführung kann variieren variieren geringfügig zwischen den Browsern, aber der oben beschriebene allgemeine Ablauf bleibt bestehen konsistent.

Parallelität:

Einige Ressourcen, wie CSS und Bilder, können parallel geladen werden, ohne die Analyse von HTML zu blockieren. Allerdings blockieren externe JavaScript-Dateien das Parsen von HTML, bis sie heruntergeladen und ausgeführt werden.

Referenz:

• [Browser Engineering: Load and Execution of a Web Seite](https://browser.engineering/posts/load-execute-web-page/)
• [Google Developers: JavaScript Ausführungsreihenfolge](https://developers.google.com/web/fundamentals/primers/html-and-css/script-execution)

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