Différences entre async et defer en HTML5

0 commentaire

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

<tr>
    <th class="type" rowspan="3"><samp>&lt;script defer&gt;</samp></th>
    <td class="hidden">-</td><td class="hidden">-</td><td class="hidden">-</td><td class="hidden">-</td><td class="hidden">-</td>
</tr>
<tr>
    <td class="parse">Analyse HTML</td>
    <td class="parse load"><span>Analyse</span> + Chargement...</td>
    <td colspan="2" class="parse">Analyse HTML</td>
    <td class="exec">Exécution JS</td>
</tr>
<tr class="hidden separator"><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>

<tr>
    <th class="type" rowspan="3"><samp>&lt;script async&gt;</samp></th>
    <td class="hidden">-</td><td class="hidden">-</td><td class="hidden">-</td><td class="hidden">-</td><td class="hidden">-</td>
</tr>
<tr>
    <td class="parse">Analyse HTML</td>
    <td class="parse load"><span>Analyse</span> + Chargement...</td>
    <td class="exec">Exécution JS</td>
    <td colspan="2" class="parse">Analyse HTML</td>
</tr>
<tr class="hidden"><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<script>
Analyse HTML 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>

Lire dans une autre langue