Comment s'exécute une page Web : une analyse étape par étape ?

Séquence d'exécution d'une page Web

Lors de la réception d'une réponse pour une page Web, le navigateur initie la séquence d'exécution suivante :

1. Chargement HTML

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

2. Récupération de ressources externes

De haut en bas, le navigateur charge les ressources externes (scripts, CSS, images) en parallèle.

3. Exécution JavaScript

Externe (synchrone) :Le navigateur télécharge, analyse et exécute immédiatement les fichiers JavaScript externes, bloquant l'analyse HTML.
Externe (asynchrone) : Les navigateurs modernes peuvent utiliser des techniques de chargement non bloquantes, permettant à l'analyse HTML de continuer pendant le chargement et l'exécution de fichiers externes. scripts.
En ligne : JavaScript en ligne s'exécute dans le processus d'analyse HTML.

4. Exécution CSS

Le navigateur télécharge, analyse et applique les règles CSS au fur et à mesure qu'il les rencontre dans le HTML.

5. Événement Document Ready

Une fois que tous les éléments DOM et ressources externes ont été chargés et analysés, le navigateur déclenche l'événement « document prêt », généralement $(document).ready().

6. Exécution ultérieure de JavaScript

Le code JavaScript qui s'exécute après l'événement « document prêt » continue son exécution.

7. Téléchargement d'images

Le navigateur télécharge des images et d'autres ressources multimédias selon les spécifications du HTML.

Pour répondre à vos questions spécifiques :

1. La page charge les ressources externes de haut en bas, en parallèle.
2. La séquence de chargement est la suivante : HTML -> Ressources externes -> JavaScript -> CSS -> Événement « Document prêt » -> Plus de JavaScript -> Téléchargement d'images.
3. JavaScript en ligne : pendant l'analyse HTML. JavaScript externe (synchrone) : bloque l'analyse HTML. JavaScript externe (asynchrone) : continue le chargement du HTML.
4. CSS : appliqué tel qu'il est rencontré dans le HTML.
5. $(document).ready : déclenché une fois que tous les éléments et ressources DOM ont été chargés.
6. Seul kkk.png sera téléchargé, en remplacement de l'original image.

Remarque :

La séquence d'exécution peut varier légèrement en fonction des paramètres du navigateur (par exemple, les limites des requêtes parallèles) et des mécanismes de mise en cache. Une couverture détaillée du processus de chargement et d'exécution du navigateur est disponible sur : https://browser.engineering/ (open source : https://github.com/browserengineering/book).

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!