Le chargement des scripts : les attributs defer et async

1. Objectifs

   • Comprendre pourquoi un script classique bloque l'affichage de la page.
   • Connaître le fonctionnement des attributs async et defer.
   • Choisir le bon attribut selon le type de script.
   • Utiliser les événements DOMContentLoaded et load.

2. Le problème : le script qui bloque la page

   • Le navigateur construit la page en analysant le HTML de haut en bas (on parle de parsing).
   • Quand il rencontre un <script src="..."> classique, il met l'analyse en pause, télécharge le fichier, l'exécute, puis reprend la lecture du HTML.
   • Conséquences : sur une connexion lente ou avec un gros fichier, la page reste blanche ; et le script ne peut pas accéder aux éléments placés après lui.

   

3. L'attribut async

<script src="js/statistiques.js" async></script>

• Le fichier est téléchargé en parallèle, sans bloquer l'analyse du HTML.
• Il est exécuté dès qu'il est prêt, ce qui interrompt alors brièvement l'analyse.
• L'ordre d'exécution n'est pas garanti: le fichier le plus rapide à télécharger s'exécute en premier.
• Le DOM peut ne pas être complet au moment de l'exécution.
• À réserver aux scripts indépendants qui ne touchent pas à la page et ne dépendent d'aucun autre script : statistiques de visite, publicité, widgets externes.

<script src="js/outils.js" defer></script>
<script src="js/app.js" defer></script>

• Le fichier est téléchargé en parallèle, sans bloquer l'analyse du HTML.
• Il est exécuté une fois l'analyse terminée: tous les éléments de la page existent.
• Les scripts defer s'exécutent dans l'ordre où ils apparaissent : outils.js avant app.js.
• Ils s'exécutent avant l'événement DOMContentLoaded.
• C'est le choix recommandé pour le code de votre application.

6. Les événements DOMContentLoaded et load

   • DOMContentLoaded est déclenché sur document quand le HTML est entièrement analysé et que les scripts defer ont été exécutés (sans attendre les images).
   • load est déclenché sur window quand tout est chargé : images, feuilles de style, iframes.
   • Avant l'arrivée de defer, on entourait le code de DOMContentLoaded pour attendre la page. Avec defer, ce n'est plus nécessaire, mais vous le rencontrerez souvent dans du code existant.

   document.addEventListener("DOMContentLoaded", () => {
     console.log("Le HTML est prêt : je peux manipuler le DOM");
   });
   
   window.addEventListener("load", () => {
     console.log("Toutes les images sont chargées");
   });

7. Exemple : observer l'ordre d'exécution

   • Créez trois fichiers qui affichent leur nom dans la console, puis la page :

   // js/a.js
   console.log("a.js exécuté");
   // js/b.js
   console.log("b.js exécuté");
   // js/c.js
   console.log("c.js exécuté, titre :", document.querySelector("h1")?.textContent);

   <!DOCTYPE html>
   <html lang="fr">
   <head>
     <meta charset="UTF-8">
     <title>Ordre des scripts</title>
     <script src="js/a.js" async></script>
     <script src="js/b.js" defer></script>
     <script src="js/c.js" defer></script>
     <script>
       document.addEventListener("DOMContentLoaded", () => console.log("DOMContentLoaded"));
       window.addEventListener("load", () => console.log("load"));
     </script>
   </head>
   <body>
     <h1>Ordre de chargement</h1>
     <img src="https://picsum.photos/800/400" alt="Image de test">
   </body>
   </html>

   • Résultat habituel : b.js puis c.js (qui trouve bien le titre), puis DOMContentLoaded, et enfin load après l'image. La position de a.js (async) peut varier d'un rechargement à l'autre.
   • Dans l'onglet Réseau des DevTools, activez la limitation (Slow 4G) et rechargez : observez la cascade de téléchargement.

8. Activités

Activité 1 : prédire l'ordre

• Avant d'exécuter l'exemple, écrivez l'ordre d'affichage que vous attendez. Exécutez-le cinq fois avec Live Server : l'ordre change-t-il ? Pour quel script ?

Activité 2 : choisir le bon attribut

• Pour chaque script, choisissez entre aucun attribut, async, defer ou type="module", et justifiez :
  1. le fichier app.js qui ajoute des événements aux boutons de la page ;
  2. le script de mesure d'audience fourni par un service externe ;
  3. bootstrap.bundle.min.js, utilisé ensuite par app.js;
  4. main.js, qui contient des instructions import.

Activité 3 : le piège de async

• Remplacez defer par async sur b.js et c.js, puis faites dépendre c.js d'une fonction déclarée dans b.js. Rechargez plusieurs fois avec la limitation réseau : que se passe-t-il parfois ? Expliquez.
• Déposez vos fichiers et vos observations dans le dépôt GitHub js-defer-async.