Exécution asynchrone de script

L’attribut async de l’élément script permet le chargement et l’exécution asynchrones du script associé par rapport au reste de la page. Le script se charge et s’exécute alors en arrière-plan pendant que l’analyse de la page se poursuit. En ce qui concerne les pages qui utilisent des scripts nécessitant un traitement intensif, l’attribut async peut améliorer de façon significative les performances de chargement des pages.

Attribut async

L’attribut async fait partie de la spécification HTML5 du World Wide Web Consortium (W3C)  et est conçu pour des cas où les dépendances d’un script n’existent pas, le script devant tout de même être exécuté le plus tôt possible. Dans l’exemple hypothétique suivant, gardez à l’esprit que sans l’attribut async (ou defer), un script peut bloquer le chargement du contenu d’une autre page.

Lilah tient un blog personnel qui utilise des widgets de script. Ces widgets servent à rendre l’accès à son blog plus performant. Sa page reste fonctionnelle même sans aucun widget chargé (elle veut que les utilisateurs puissent accéder à son blog sans activation de scripts). Actuellement, elle charge ces widgets au début de son fichier HTML, mais ses utilisateurs se plaignent que sa page prend trop de temps à charger en raison de la durée de l’exécution des scripts. Elle a essayé de placer les scripts au bas de la page pour accélérer le chargement, mais étant donné que le volume du contenu est important, l’accès à son site n’est pas plus performant, même avec cette modification. Elle veut que les widgets soient chargés le plus rapidement possible, mais sans bloquer le reste de sa page. Après une rapide recherche, elle réalise que l’attribut async HTML5 correspond exactement à ce dont elle a besoin. En plaçant tous ses widgets de script dans un fichier externe, elle peut de nouveau proposer rapidement sa page avec de meilleures performances d’accès, car les scripts s’exécutent plus rapidement.


<head>
  <title>Lilah's Blog</title>
  <script async src="widgets.js"></script>
</head>


Détails de l’implémentation

Internet Explorer 10 et les applications du Windows Store en JavaScript prennent en charge les attributs async et defer de l’élément script (l’attribut defer est pris en charge dans les versions antérieures de Windows Internet Explorer). Les attributs async et defer ne peuvent être utilisés que si l’attribut src est présent. Les quatre combinaisons possibles sont les suivantes.

UtilisationDescription

<script src="widgets.js"></script>

Le script est exécuté immédiatement et la page attend la fin de son exécution pour poursuivre l’analyse. Cela peut réduire considérablement le temps de chargement de la page.

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

Le script est téléchargé de façon asynchrone pendant que l’analyse de la page se poursuit. Le script s’exécute une fois que le téléchargement est terminé.

<script defer src="widgets.js"></script>

Le script est exécuté lorsque l’analyse de la page est terminée.

<script async defer src="widgets.js"></script>

L’attribut async est honoré et l’attribut defer est ignoré. Les développeurs peuvent alors utiliser async dans les navigateurs qui le prennent en charge, et ils peuvent continuer à utiliser defer dans les navigateurs qui ne prennent pas en charge async.

 

En résumé, l’attribut async permet aux développeurs Web d’améliorer le temps de chargement des pages avec un minimum d’effort. Il évite aussi d’avoir recours à des solutions de contournement spécifiques au navigateur pour les bibliothèques du chargeur de script.

Informations de référence sur les API

async
defer

Démonstrations du site Internet Explorer Test Drive

HTML5 Async Scripts

Billets IEBlog

Programmation asynchrone en JavaScript avec « Promises »

Spécification

HTML5 : Section 4.3.1

 

 

Afficher:
© 2014 Microsoft