Attribut async de script HTML

Balise HTML <script>

Définition et utilisation

async c'est une propriété booléenne.

Si async Cette propriété, le script est téléchargé en parallèle avec l'analyse de la page et exécuté immédiatement lorsqu'il est disponible. Une fois le script complètement téléchargé, l'analyse de la page est interrompue, puis le script est exécuté, puis la lecture de la page reste

Attention :async Cette propriété ne s'applique qu'aux scripts externes (et ne devrait être utilisée que lorsque l'attribut src existe).

Attention :Les scripts externes peuvent être exécutés de plusieurs manières :

  • Si async est défini : le script est téléchargé en parallèle avec l'analyse de la page et exécuté immédiatement lorsqu'il est disponible (avant la fin de l'analyse)
  • Si defer est défini (et async non) : le script est téléchargé en parallèle avec l'analyse de la page et exécuté après l'analyse de la page
  • Si ni async ni defer n'est définie : le script est téléchargé et exécuté immédiatement, bloquant l'analyse de la page jusqu'à ce que le script soit exécuté

Exemple

Les scripts référencés sont téléchargés en parallèle avec l'analyse de la page et exécutés immédiatement lorsqu'ils sont disponibles :

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

Essayez-le vous-même

Syntaxe

<script async>

Exécution asynchrone des scripts

Le comportement par défaut du navigateur lorsqu'il rencontre un élément script est de suspendre le traitement de la page pendant le chargement et l'exécution du script. Les éléments script sont exécutés les uns après les autres (dans l'ordre défini) de manière synchrone (ne s'occupant plus d'autres choses pendant le chargement et l'exécution du script).

En tant que méthode par défaut pour traiter les scripts, l'exécution en ordre synchrone a son propre sens. Cependant, certains scripts n'ont pas besoin de ce traitement, pour ces scripts, on peut utiliser async Propriété améliore ses performances. Un exemple typique est le script de suivi (tracking script). Ce script peut rapporter les historiques de visite du site web de l'utilisateur afin que les entreprises publicitaires puissent personnaliser et diffuser des publicités en fonction des habitudes de l'utilisateur, ou collecter des statistiques des visiteurs du site web pour l'analyse, etc. Ces scripts sont indépendants et généralement n'ont pas besoin d'interagir avec les éléments du document HTML. Il n'a pas de sens de retarder l'affichage de la page pour attendre qu'ils se chargent et envoient des rapports à leur serveur.

L'utilisation async Après avoir ajouté la propriété, le navigateur chargera et exécutera le script de manière asynchrone tout en continuant à analyser d'autres éléments HTML (y compris d'autres éléments script). Si utilisé correctement, cela peut grandement améliorer les performances globales du chargement.

Attention :Utilisation async Une des conséquences importantes de la propriété est que les scripts dans la page peuvent ne plus s'exécuter dans l'ordre défini. Par conséquent, si le script utilise des fonctions ou des valeurs définies dans d'autres scripts, il ne faut pas les utiliser async Propriété.

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 10.0 3.6 5.1 15.0

Balise HTML <script>