Bases des technologies web

Dans le traitement qui mène le navigateur jusqu'au premier affichage (le chemin de rendu critique, ou critical rendering path), un élément <script src="app.js"> sans attribut placé dans <head> arrête l'analyse du HTML à cet endroit. Quel comportement est correct si l'on ajoute l'attribut defer à cet élément ?

  1. AIl est exécuté dès la fin de son téléchargement, en interrompant l'analyse du HTML, et l'ordre d'exécution de plusieurs scripts n'est pas garanti
  2. BIl n'est ni téléchargé ni exécuté, et n'est chargé que lorsque l'utilisateur interagit avec la page
  3. CIl est téléchargé en parallèle de l'analyse du HTML et exécuté une fois l'analyse terminée, dans l'ordre où les scripts figurent dans le document
Afficher la réponse et l'explication

Réponse : C. Il est téléchargé en parallèle de l'analyse du HTML et exécuté une fois l'analyse terminée, dans l'ordre où les scripts figurent dans le document

Le navigateur analyse le HTML pour construire le DOM et le CSS pour construire le CSSOM, combine les deux pour déterminer ce qu'il faut afficher, calcule la position et la taille des éléments (mise en page, layout), puis dessine (paint). Un élément script sans attribut pouvant modifier le DOM, il arrête l'analyse du HTML jusqu'à la fin de son téléchargement et de son exécution. Avec defer, le téléchargement se fait en parallèle de l'analyse, et l'exécution a lieu après l'analyse, dans l'ordre du document. Avec async, le script est exécuté dès la fin de son téléchargement, et l'ordre n'est donc pas garanti.

S'entraîner sur ce thème Retour au thème

Autres questions sur Bases des technologies web

  1. Lorsqu'on exécute le JavaScript ci-dessus dans un navigateur, quel est l'ordre correct d'affichage des caractères dans la console ?
  2. Selon la politique de même origine des navigateurs, quelle URL est considérée comme de même origine que https://www.example.com/app/index.html ?
  3. Le JavaScript d'une page de https://app.example.com veut envoyer avec fetch une requête POST vers https://api.example.net/orders, avec un corps de type Content-Type: application/json. Quel comportement de CORS est correct dans ce cas ?
  4. Quelle description d'un Service Worker est correcte ?
  5. Dans une page en responsive design adaptée aussi aux smartphones, quel est le but principal d'écrire <meta name="viewport" content="width=device-width, initial-scale=1"> dans <head> ?