Différences entre async et defer en HTML5

La balise HTML script permet de définir quand le code JavaScript dans votre page est exécuté. Les attributs HTML5 async et defer sont à présent supportés par Firefox, Chrome, Safari et Internet Explorer 10+ (sinon ils sont ignorés) et permettent de modifier le comportement de chargement des scripts. Voici de courtes explications sur les différences de chaque appel.

Tableau Explicatif

<script>
Analyse HTML Chargement... Exécution JS Analyse HTML
<script defer>
Analyse HTML Analyse + Chargement... Analyse HTML Exécution JS
<script async>
Analyse HTML Analyse + Chargement... Exécution JS Analyse HTML
Legend :
  • Chargement...
  • Exécution JS
  • Analyse HTML

Pour les scripts externes

L'exécution normal

<script src=""></script>

C'est le comportement standard de l'élément script. L'analyse du code HTML est mise en pause le temps que le script soit exécuté. Pour les serveurs lents et les scripts lourds (en temps d'exécution et poids) cela signifie que l'affichage de la page va mettre du temps.

L'exécution différée

<script defer src=""></script>

Cela revient à exécuter vos scripts dans l'ordre où ils ont été rencontrés mais seulement à la fin de l'analyse HTML. Cela est la même chose que de mettre vos scripts en pied de page juste avant la fermeture du body mais de tout de même les placer physiquement dans le DOM dans le header. En réalité defer existe depuis IE6 mais ne garantie pas l'ordre d'exécution avant IE10.

L'exécution asynchrone

<script async src=""></script>

Aucune importance de savoir quand le script sera disponible ? L'asynchrone est votre ami. Le code JavaScript sera exécuté aussitôt qu'il sera disponible. Parfait pour des scripts comme les boutons sociaux ou Modernizr (si vous gérez élégamment les phénomènes de FOUC).

Pour les scripts inline

Là, async et defer ne servent à rien, ils sont simplement ignorés. Sous Chrome et Safari tous les scripts inline bloque le rendu quelque soit le mot-clé employé et sous Firefox et IE de l'analyse spéculative est faites.

Fallback

Pour les navigateurs ne supportant pas defer et async comme il se doit vous pouvez utiliser la fallback async_defer_script.js comme ceci :

<head>
     ...
     <!--[if lt IE 10]><script src="async_defer_script.js"></script><![endif]-->
     ...
</head>