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

Séquence de chargement et d'exécution d'une page Web Aperçu

Lorsqu'une page Web est demandée, le navigateur effectue une série de tâches pour charger et exécuter son contenu. Cela implique le traitement du document HTML, la récupération et l'exécution de ressources externes et le rendu de la page.

Séquence de chargement Document HTML : Le navigateur télécharge le HTML document et commence à l'analyser. Ressources en ligne (scripts et styles) : Comme le Le navigateur rencontre des fichiers et balises, il les analyse et les exécute immédiatement. Ressources externes (scripts et CSS) : Les fichiers de script externes ( ) sont téléchargés, analysés , et exécuté. Les fichiers CSS externes ( ) sont téléchargés et appliqués à la page. Images et autres contenus : Le navigateur simultanément télécharge les images et autres ressources spécifiées dans le document HTML. Exécution de JavaScript En ligne JavaScript : Le JavaScript en ligne est exécuté immédiatement après avoir été analysé.

JavaScript externe :

Blocage : Si un script externe est marqué defer ou async, le navigateur le télécharge et l'exécute avant de continuer à analyser le HTML. Non bloquant : Si un script externe est marqué avec chargement, le navigateur le télécharge et l'exécute de manière asynchrone, sans bloquer l'analyse HTML. Exécution du CSS Le CSS est appliqué à la page tel qu'il est rencontré dans le ou des balises de lien. Les modifications apportées au CSS une fois que la page a été analysée et rendue mettront à jour dynamiquement l'apparence de la page. Minutage de $(document).ready La fonction $(document).ready s'exécute lorsque tous les éléments HTML et ressources externes ont été chargés et exécutés. Cela garantit que le code JavaScript peut interagir en toute sécurité avec les éléments de la page.

Téléchargement de l'image abc.jpg sera téléchargé si c'est la première fois qu'il est rencontré sur la page. kkk.png sera téléchargé et remplacera abc.jpg dans le fichier élément car il est défini dynamiquement à l'aide de JavaScript. Variations selon les navigateurs La séquence de chargement et d'exécution peut varier légèrement selon les différents navigateurs, mais les principes généraux restent les mêmes.

Références [Ingénierie du navigateur Livre](https://browser.engineering/) [Ordre d'exécution JavaScript dans les pages Web](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script ) [Cycle de vie des pages dans Navigateurs](https://addyosmani.com/blog/page-lifecycle-in-browsers/)