Comment une page Web se charge-t-elle et s'exécute-t-elle : une analyse étape par étape ?

Répartition du chargement et de l'exécution d'une page Web

Question : Quelle est la séquence de chargement et d'exécution d'un site Web page ?

Réponse :

1. Analyse HTML :

• Le navigateur télécharge et analyse le document HTML, créant ainsi le modèle d'objet de document (DOM).

2. Chargement des ressources :

• Les ressources externes sont téléchargées en parallèle :

  • JavaScript (scripts externes)
  • CSS (style externe feuilles)
  • Images

3. Exécution JavaScript :

• JavaScript en ligne dans <script> tags est exécuté.</script>
• Les fichiers JavaScript externes sont analysés et exécutés une fois téléchargés.

4. Exécution CSS :

• Les fichiers CSS externes sont téléchargés et analysés.
• Les règles CSS sont appliquées aux éléments DOM.

5. Modifications du DOM :

• L'événement $(document).ready() se déclenche lorsque le DOM est prêt (toutes les ressources chargées).
• JavaScript interne (dans <script> tags) s'exécute, modifiant potentiellement le DOM.</script>

6. Affichage des ressources :

• Les images et autres ressources externes sont affichées sur la page Web.

7. Exécution JavaScript supplémentaire :

• Les fichiers JavaScript externes chargés une fois que DOM est prêt continuent à s'exécuter.

Téléchargement d'images :

• Abc.jpg et kkk.png seront téléchargés.
• L'image affichée dans le L'élément sera kkk.png, car son attribut src est mis à jour par le code JavaScript.

Flux d'exécution du navigateur :

La séquence de chargement et d'exécution peut varient légèrement selon les navigateurs, mais le flux général décrit ci-dessus reste cohérent.

Parallélisme :

Certaines ressources, telles que CSS et images, peuvent être chargées en parallèle sans bloquer l'analyse du HTML. Cependant, les fichiers JavaScript externes bloquent l'analyse du HTML jusqu'à ce qu'ils soient téléchargés et exécutés.

Référence :

• [Ingénierie du navigateur : chargement et exécution d'un site Web Page](https://browser.engineering/posts/load-execute-web-page/)
• [Développeurs Google : JavaScript Ordre d'exécution](https://developers.google.com/web/fundamentals/primers/html-and-css/script-execution)

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!