Attribut defer en HTML
L'attribut defer en HTML indique qu'un script s'exécute après l'analyse de la page. Découvrez comment l'utiliser sur l'élément <script>.
L'attribut HTML defer est un attribut boolean sur l'élément <script> qui indique au navigateur de télécharger le script en parallèle avec l'analyse du HTML, mais d'attendre et de l'exécuter uniquement après que la page entière a terminé son analyse — juste avant que l'événement DOMContentLoaded se déclenche.
Il fonctionne uniquement avec les scripts externes : il n'a d'effet que lorsque l'attribut src est présent et est ignoré sur les scripts inline (un <script> dont le JavaScript se trouve entre les balises).
Pourquoi l'attribut defer existe
Un simple <script src="..."> bloque le rendu. Lorsque l'analyseur le rencontre, il arrête de construire la page, télécharge le fichier, l'exécute, puis seulement continue. Si le script est dans le <head>, l'utilisateur se retrouve devant une page blanche jusqu'à son chargement.
La solution classique consistait à placer les balises <script> tout à la fin du <body>, afin que le HTML soit analysé en premier. defer rend cette astuce inutile : vous pouvez conserver vos scripts dans le <head> (meilleur pour la lisibilité et pour que le navigateur les découvre et les télécharge tôt), tandis que le script s'exécute quand même uniquement après que le DOM est entièrement construit. Étant donné que le DOM est garanti prêt, les scripts différés peuvent interroger des éléments en toute sécurité sans tout envelopper dans un écouteur DOMContentLoaded.
defer vs async
defer et async permettent tous deux au navigateur de télécharger le script en arrière-plan sans bloquer l'analyse du HTML. La différence réside dans le moment et l'ordre d'exécution des scripts :
| Comportement | defer | async |
|---|---|---|
| Bloque l'analyse HTML pendant le téléchargement | Non | Non |
| Quand le script s'exécute | Après la fin de l'analyse, juste avant DOMContentLoaded | Dès qu'il finit de se télécharger (peut interrompre l'analyse) |
| Ordre d'exécution par rapport aux autres scripts | Préservé — s'exécute dans l'ordre du document | Non garanti — le premier téléchargé s'exécute en premier |
| DOM garanti prêt | Oui | Non |
Utilisez defer lorsque les scripts dépendent du DOM ou les uns des autres (l'ordre est important). Utilisez async pour les scripts indépendants et autonomes tels que les balises d'analyse ou de publicité, où l'ordre n'a pas d'importance et vous souhaitez que chacun s'exécute dès son arrivée.
Si ni async ni defer n'est présent, le script est récupéré et exécuté immédiatement, bloquant l'analyseur à ce point.
En HTML 4.01, le comportement de defer dépendait de l'implémentation, tandis que HTML5 l'a standardisé. En XHTML, defer doit être écrit sous la forme <script defer="defer"> car la minimisation des attributs est interdite.
Syntaxe
<script src="example.js" defer></script>Exemple de l'attribut defer en HTML
Le script ci-dessous est placé dans le <head>, mais comme il est différé, il ne s'exécute qu'après que le paragraphe existe dans le DOM — donc document.getElementById le trouve :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
defer
></script>
<noscript>Sorry, your browser doesn't support JavaScript!</noscript>
</head>
<body>
<h1>Example</h1>
<p id="demo">Waiting for the deferred script...</p>
<script defer>
// This deferred external script (jQuery) is already loaded,
// and the DOM is fully parsed, so the line below works.
document.getElementById("demo").textContent =
"jQuery version " + jQuery.fn.jquery + " ran after parsing.";
</script>
</body>
</html>Remarque :
defersur le<script>inline ci-dessus est ignoré — les scripts inline s'exécutent toujours à leur emplacement. Cela fonctionne ici uniquement parce qu'il est le dernier élément et que le script externe différé a déjà terminé. Pour garantir qu'une bibliothèque externe différée est chargée avant votre propre code, déplacez votre code dans son propre fichierdeferexterne également, car les scripts différés s'exécutent dans l'ordre du document.