Comment un navigateur Web charge-t-il et exécute-t-il les ressources d'une page Web ?

Comprendre la séquence de chargement et d'exécution d'une page Web

Introduction

Lorsqu'un utilisateur demande une page Web, le navigateur subit un processus systématique pour charger et afficher la page. Ce processus implique le téléchargement, l'analyse et l'exécution séquentielles de diverses ressources, notamment HTML, CSS, JavaScript et des images.

Séquence de chargement et d'exécution

Analyse HTML :

1. Le navigateur charge le document HTML et lance l'analyse processus.
2. L'analyse HTML crée le modèle d'objet de document (DOM), qui représente la structure et le contenu de la page.

Téléchargement de ressources externes :

3. Lors de l'analyse HTML, le navigateur détecte les ressources externes telles que les fichiers CSS et JavaScript scripts.
4. Le navigateur lance des téléchargements asynchrones de ces ressources en parallèle.

Exécution CSS et JavaScript en ligne :

5. Comme le HTML est analysé, le navigateur rencontre des blocs CSS et JavaScript en ligne.
6. Ces ressources sont exécutées immédiatement pendant analyse.

Application CSS :

7. Lorsqu'un fichier CSS est téléchargé, le navigateur analyse et applique les règles au DOM.
8. Les éléments du DOM sont stylisés en conséquence.

JavaScript Exécution :

9. Les fichiers JavaScript externes sont téléchargés et exécutés une fois rencontrés lors de l'analyse HTML.
10. Le navigateur bloque l'analyse jusqu'à ce que l'exécution de JavaScript soit terminée.

Manipulation DOM :

11. Une fois l'analyse est terminée, le DOM est prêt à être manipulé.
12. JavaScript peut modifier le DOM, affectant la mise en page et le contenu de la page.

Événement Document Ready :

13. Lorsque l'analyse HTML et le chargement des ressources externes sont terminés, l'événement document prêt est déclenché.
14. Le code JavaScript dans cet événement est exécuté pour initialiser les éléments de la page et gérer les interactions de l'utilisateur.

Chargement de l'image

Dans votre exemple, abc.jpg est téléchargé et affiché lorsqu'il est rencontré lors de l'analyse HTML. kkk.png est téléchargé et défini comme source de l'image lorsque l'événement $(document).ready est déclenché.

Différences de navigateur

La séquence de chargement et d'exécution peut varier légèrement en fonction du navigateur. Par exemple, certains navigateurs limitent le nombre de requêtes simultanées par domaine pour optimiser le chargement des ressources.

mise en cache

Les mécanismes de mise en cache ont un impact sur le chargement des ressources. Les ressources mises en cache peuvent être chargées à partir du stockage au lieu du serveur, réduisant ainsi le temps de téléchargement.

Exécution parallèle

Généralement, l'analyse HTML, la manipulation JavaScript/DOM et l'application CSS s'exécutent en parallèle dans des threads distincts. Cependant, l'exécution de JavaScript peut bloquer l'analyse HTML jusqu'à la fin du script. Les règles CSS sont appliquées de manière incrémentielle, permettant un rendu asynchrone.

Références

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!