defer et async modifient quand un <script> externe est téléchargé et exécuté par rapport à l'analyse du HTML. Les deux permettent au script de se télécharger en parallèle sans bloquer l'analyseur — la différence réside dans le moment de l'exécution.
Normal: parse──stop──[download+exec]──parse──────── (slowest)
async: parse──────────────────exec──parse──────── (runs whenever it arrives)
defer: parse───────────────────────────parse──exec (after parsing, before DOMContentLoaded)
async | defer | |
|---|---|---|
| Téléchargement | parallèle | parallèle |
| Exécution | dès que téléchargé | après analyse complète du HTML |
| Ordre préservé ? | Non (celui qui finit en premier) | Oui (ordre du document) |
| Bloque l'analyseur ? | brièvement pendant l'exécution | jamais |
defer — pour les scripts qui touchent le DOM ou qui dépendent les uns des autres/de l'ordre (votre code applicatif). Ils s'exécutent après l'existence du DOM, en séquence, juste avant DOMContentLoaded.async — pour les scripts tiers indépendants qui ne dépendent pas du DOM ou d'autres scripts (analytics, publicités). L'ordre n'a pas d'importance, exécutez-les dès que possible.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Note : les deux ne s'appliquent qu'aux scripts externes (src) ; ils sont ignorés sur les scripts inline. Les modules ES (type="module") sont différés par défaut.
Utiliser defer/async empêche les scripts de bloquer l'analyse du HTML, ce qui améliore directement les performances de chargement et le First Contentful Paint.
Choisir le bon (defer pour le code applicatif ordonné dépendant du DOM, async pour les scripts tiers sans dépendance) évite à la fois les chargements lents et les bugs de dépendance d'ordre.
Une bibliothèque de questions d'entretien IT avec des réponses détaillées — du Junior au Senior.
Faire un don