Attribut async en HTML
L'attribut async est un attribut boolean qui indique que le script sera exécuté de façon asynchrone. Découvrez sur quel élément il peut être utilisé.
L'attribut async est un attribut boolean utilisé sur l'élément <script>. Il indique au navigateur de télécharger un script externe sans interrompre l'analyse du HTML, et d'exécuter ce script dès que le téléchargement est terminé.
Il ne fonctionne que pour les scripts externes, et doit donc être associé à l'attribut src. Ajouter async à un script inline (dont le JavaScript est écrit directement entre les balises) n'a aucun effet — le navigateur l'ignore.
Pourquoi async est important
Normalement, lorsque le navigateur rencontre une balise <script src="..."> ordinaire, il arrête d'analyser le HTML, télécharge le fichier, l'exécute, puis reprend la construction de la page. Sur une connexion lente, cela bloque le rendu et rend la page lente à s'afficher.
async retire le téléchargement du chemin critique : le navigateur continue d'analyser et de construire la page pendant que le script est récupéré en arrière-plan. Le résultat est un chargement de script plus rapide et non bloquant.
async, defer ou aucun des deux
Un script externe peut être chargé de trois façons. La différence réside dans le moment où il est téléchargé et quand il s'exécute par rapport à l'analyse du HTML.
| Comportement | Téléchargement | Exécution | Ordre préservé ? |
|---|---|---|---|
| Aucun (défaut) | Bloque l'analyse | Immédiatement, avant la reprise de l'analyse | Oui |
async | En parallèle, sans blocage | Dès que le fichier est prêt (peut interrompre l'analyse) | Non |
defer | En parallèle, sans blocage | Après la fin de l'analyse, avant DOMContentLoaded | Oui |
<!-- Blocks parsing until downloaded and run -->
<script src="example.js"></script>
<!-- Downloads in parallel, runs the moment it arrives -->
<script src="example.js" async></script>
<!-- Downloads in parallel, runs after the HTML is fully parsed -->
<script src="example.js" defer></script>Points clés :
- Utilisez
asyncpour les scripts indépendants qui ne dépendent ni de la page ni d'autres scripts (analytics, balises publicitaires, trackers). - Utilisez
deferlorsque le script a besoin du DOM complet, ou lorsque plusieurs scripts doivent s'exécuter dans un ordre précis. - Un
<script type="module">est différé par défaut, il n'est donc pas nécessaire d'y ajouterdefer; ajouterasyncà un module le fait s'exécuter dès son chargement.
L'ordre n'est pas garanti avec async
Avec async, les scripts s'exécutent dans l'ordre où ils finissent de se télécharger — et non dans l'ordre où ils apparaissent dans le HTML. Cela casse tout script qui dépend d'un autre.
<!-- BAD: jquery.js may finish AFTER app.js, so $ is undefined when app.js runs -->
<script src="jquery.js" async></script>
<script src="app.js" async></script>Si le second script dépend du premier, utilisez defer à la place — les scripts différés s'exécutent toujours de haut en bas :
<!-- GOOD: jquery.js is guaranteed to run before app.js -->
<script src="jquery.js" defer></script>
<script src="app.js" defer></script>Syntaxe
<script src="example.js" async></script>Exemple de l'attribut async en HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="example.js" async></script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<h1>Example</h1>
<p>
A browser that doesn’t support JavaScript will display the content inside the noscript element.
</p>
<script>
document.write("My first JavaScript example!")
</script>
</body>
</html>