Attributs `async` et `defer`
Chargez des scripts sans bloquer l’analyse du HTML.
Attributs `async` et `defer` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Comportement par défaut des scripts
Une balise <script src="..."> ordinaire, sans async ni defer, bloque l’analyse du HTML pendant son téléchargement et son exécution. Le rendu de tout ce qui se trouve sous le script est interrompu, raison pour laquelle les scripts étaient traditionnellement placés à la fin de <body>.
async télécharge en parallèle
<script async src="..."> télécharge le script en parallèle de l’analyse HTML et l’exécute dès son arrivée. L’exécution interrompt tout de même l’analyse HTML, mais seulement brièvement — le script ne bloque pas le téléchargement des autres ressources.
L’ordre d’exécution de async est imprévisible
Deux scripts async s’exécutent dans l’ordre dans lequel leur téléchargement se termine. N’utilisez jamais async pour des scripts qui dépendent les uns des autres (jQuery avant son extension jQuery), car la dépendance peut s’exécuter avant que son prérequis soit disponible.
defer attend le HTML
<script defer src="..."> se télécharge en parallèle comme async, mais son exécution est différée jusqu’à ce que le HTML soit entièrement analysé — juste avant l’événement DOMContentLoaded. Le script ne bloque jamais l’analyse.
<script defer src="app.js"></script>
<script defer src="analytics.js"></script>defer préserve l’ordre
Plusieurs scripts defer s’exécutent dans l’ordre de leur déclaration, exactement comme des scripts normaux placés à la fin de body. Cela fait de defer le bon choix pour les scripts dépendants : les utilitaires se chargent avant les modules qui les utilisent, sans orchestration manuelle.
Choisir entre async et defer
Utilisez async pour des fragments tiers indépendants (analyse d’audience, publicités) qui ne touchent pas au DOM et n’ont aucune dépendance. Utilisez defer pour votre propre code applicatif qui a besoin du DOM et dépend d’autres scripts.
Les modules sont différés par défaut
<script type="module"> se comporte automatiquement comme defer : il se télécharge en parallèle, s’exécute après l’analyse et préserve l’ordre. Ajouter defer à un module est autorisé mais redondant ; ajouter async rétablit le comportement de async.
Les scripts intégrés ignorent async/defer
async et defer s’appliquent uniquement aux scripts externes (avec src). Une balise <script> intégrée s’exécute immédiatement quels que soient ses attributs ; ceux-ci sont donc silencieusement ignorés pour <script>console.log(1)</script>.
L’emplacement devient moins déterminant
Avec defer (ou les modules), les balises <script> peuvent se trouver dans le <head> sans bloquer l’analyse — et les y placer permet au navigateur de les découvrir et de commencer à les télécharger plus tôt qu’en bas de <body>.
<head>
<script defer src="app.js"></script>
</head>Combinaison avec preload
Pour les scripts sensibles à la latence, associez <link rel="preload" as="script" href="..."> dans l’en-tête à une balise <script> différée placée en dessous. Le preload lance immédiatement le téléchargement tandis que defer garantit que l’ordre d’exécution reste correct.
Piège courant
Marquer un script async sans vérifier qu’il n’a aucune dépendance est la cause la plus courante des conditions de concurrence « ça fonctionne sur ma machine, mais ça casse en production ». En cas de doute, préférez defer : il est indulgent là où async est impitoyable.
Vérification des connaissances
Quelle est la différence entre async et defer pour deux scripts dont le second dépend du premier ?
Résumé
async et defer téléchargent tous deux les scripts en parallèle de l’analyse HTML. async s’exécute immédiatement à son arrivée, dans un ordre imprévisible : utilisez-le pour les fragments tiers indépendants. defer s’exécute après l’analyse, dans l’ordre de déclaration : utilisez-le pour le code applicatif avec des dépendances. Les modules adoptent par défaut le comportement de defer.
Questions Fréquemment Posées
La leçon « Attributs `async` et `defer` » est-elle gratuite ?
Oui — le texte complet de « Attributs `async` et `defer` » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Attributs `async` et `defer` » ?
Chargez des scripts sans bloquer l’analyse du HTML. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Attributs `async` et `defer` » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Attributs `async` et `defer`
- Préchargement, prélecture et préconnexion
- Chargement différé des images : `loading=lazy`
- Conseils de ressources : `modulepreload`