Comment un navigateur Web charge-t-il et exécute-t-il une page Web ?

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

Lorsqu'une page Web est chargée, le navigateur passe par une série d'étapes pour traiter et afficher la page. Ce qui suit est un aperçu simplifié de ce processus :

1. Analyse HTML

Le navigateur télécharge le document HTML et commence à l'analyser. Cela implique de tokeniser le code HTML, de créer une arborescence DOM et de vérifier les erreurs de syntaxe.

2. Analyse CSS

Au fur et à mesure que le HTML est analysé, le navigateur identifie et charge également tous les fichiers CSS externes. Ces fichiers CSS sont analysés dans un ensemble de règles de style, qui sont ensuite appliquées au DOM.

3. Exécution JavaScript

Les fichiers JavaScript externes sont téléchargés et exécutés dans l'ordre dans lequel ils apparaissent dans le HTML. Le JavaScript en ligne est exécuté tel qu'il est rencontré lors de l'analyse HTML.

4. Chargement des ressources

D'autres ressources, telles que des images, des polices et des fichiers multimédias, sont téléchargées en parallèle et mises en cache pour une utilisation future.

5. Manipulation DOM et gestion des événements

Une fois toutes les ressources externes chargées, le navigateur crée l'arborescence DOM finale et applique les styles CSS. Les écouteurs d'événements sont liés aux éléments HTML, permettant aux utilisateurs d'interagir avec la page.

6. Remplacement de l'image

Dans votre exemple, kkk.png remplacera abc.jpg comme source de l'image par l'identifiant « img ». En effet, le code dans $(document).ready() s'exécute une fois que toutes les ressources externes ont été chargées et que le DOM est prêt.

7. Rendu d'image

L'image remplacée est téléchargée et rendue sur la page.

Différences dans les navigateurs

Bien que la séquence générale de chargement et d'exécution soit cohérente d'un navigateur à l'autre, il peut y avoir des différences mineures variations dans la mise en œuvre. Par exemple, certains navigateurs peuvent donner la priorité à l'analyse CSS par rapport à l'exécution de JavaScript ou mettre en œuvre des optimisations telles que le chargement paresseux des images.

Remarque sur l'exécution parallèle

Bien que le CSS et le chargement des ressources puissent se produire en parallèle, l'exécution de JavaScript suit un modèle monothread. Cela signifie que le navigateur exécute le code JavaScript une instruction à la fois et que l'exécution de scripts externes bloque l'analyse du document HTML.

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!