Wie lädt und führt ein Webbrowser die Ressourcen einer Webseite aus?

Verstehen der Lade- und Ausführungssequenz einer Webseite

Einführung

Wenn ein Benutzer eine Webseite anfordert, durchläuft der Browser einen systematischen Prozess Laden und rendern Sie die Seite. Dieser Prozess umfasst das sequentielle Herunterladen, Parsen und Ausführen verschiedener Ressourcen, einschließlich HTML, CSS, JavaScript und Bildern.

Lade- und Ausführungssequenz

HTML-Parsing:

1. Der Browser lädt das HTML-Dokument und initiiert die Analyse Prozess.
2. HTML-Parsing erstellt das Document Object Model (DOM), das die Struktur und den Inhalt der Seite darstellt.

Externe Ressourcen herunterladen:

3. Beim Parsen von HTML erkennt der Browser externe Ressourcen wie CSS-Dateien und JavaScript-Skripte.
4. Der Browser initiiert asynchrone Downloads dieser Ressourcen parallel.

Inline-CSS und JavaScript-Ausführung:

5. Während der HTML-Parsing stößt der Browser auf Inline-CSS und JavaScript-Blöcke.
6. Diese Ressourcen werden sofort ausgeführt Parsen.

CSS-Anwendung:

7. Wenn eine CSS-Datei heruntergeladen wird, analysiert der Browser die Regeln und wendet sie auf das DOM an.
8. Elemente im DOM werden entsprechend gestaltet.

JavaScript Ausführung:

9. Externe JavaScript-Dateien werden heruntergeladen und ausgeführt, sobald sie während der HTML-Analyse gefunden werden.
10. Der Browser blockiert die Analyse, bis die JavaScript-Ausführung abgeschlossen ist.

DOM-Manipulation:

11. Sobald das Parsen erfolgt Fertig, das DOM ist zur Bearbeitung bereit.
12. JavaScript kann das DOM ändern und sich auf das Layout und den Inhalt der Seite auswirken.

Dokumentbereit-Ereignis:

13. Wenn die HTML-Analyse und das Laden externer Ressourcen abgeschlossen sind, ist das Ereignis „Dokument bereit“ abgeschlossen abgefeuert.
14. JavaScript-Code innerhalb dieses Ereignisses wird ausgeführt, um Seitenelemente zu initialisieren und Benutzerinteraktionen zu verarbeiten.

Bild wird geladen

In Ihrem Beispiel wird abc.jpg heruntergeladen und angezeigt, wenn es während der HTML-Analyse auftritt. kkk.png wird heruntergeladen und als Bildquelle festgelegt, wenn das Ereignis $(document).ready ausgelöst wird.

Browserunterschiede

Die Lade- und Ausführungsreihenfolge kann je nach Browser leicht variieren. Einige Browser begrenzen beispielsweise die Anzahl gleichzeitiger Anfragen pro Domain, um die Ressourcenauslastung zu optimieren.

Caching

Caching-Mechanismen wirken sich auf die Ressourcenauslastung aus. Zwischengespeicherte Ressourcen können aus dem Speicher statt vom Server geladen werden, wodurch die Downloadzeit verkürzt wird.

Parallele Ausführung

Im Allgemeinen werden HTML-Parsing, JavaScript/DOM-Manipulation und CSS-Anwendung parallel in separaten Threads ausgeführt. Allerdings kann die Ausführung von JavaScript die HTML-Analyse bis zum Abschluss des Skripts blockieren. CSS-Regeln werden inkrementell angewendet und ermöglichen ein asynchrones Rendering.

Referenzen

• [Browser Engineering Book](https://browser.engineering/)
• [jQuery Dokumentation](https://docs.jquery.com/Tutorials:Introducing_$(document).ready())

Das obige ist der detaillierte Inhalt vonWie lädt und führt ein Webbrowser die Ressourcen einer Webseite aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!