<p dir="auto"><strong>· Introduction<br />
J'ai récemment eu ce soucis avec les fichiers JavaScript qui ralentissait une page dès son chargement. Ce n'est pas agréable d'attendre, je le conçois. C'est pour ça que je me suis penché sur l'histoire du <strong>async et le <strong>defer.<br />
Deux différents modes de chargements, l'un qui charge pendant l’exécution du JS et l'autre qui attends que tout soit chargé pour que le JS s'exécute à la fin.
<hr />
<p dir="auto"><strong>· Explication des différents mode d'exécution
<p dir="auto">Comme dit précédemment pour l'<strong>async, il se charge pendant l'analyse du HTML mais aussi l'exécution du JavaScript. Donc il charge tout d'un seul coup.<br />
Tandis que <strong>defer, lui attends patiemment le chargement de la page et de l'analyse du HTML, il s'exécute au dernier moment.
<p dir="auto">Schéma du <strong>Async<br />
<img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1518539397/ppsh4wtcw07uufrwb1kj.png" alt="schéma-async.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1518539397/ppsh4wtcw07uufrwb1kj.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1518539397/ppsh4wtcw07uufrwb1kj.png 2x" />
<p dir="auto">Schéma du <strong>Defer<br />
<img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1518539402/elhwqvtbhnoxgi5wgecc.png" alt="schéma-defer.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1518539402/elhwqvtbhnoxgi5wgecc.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1518539402/elhwqvtbhnoxgi5wgecc.png 2x" />
<hr />
<p dir="auto"><strong>· Sans ses deux, il se passe quoi?
<p dir="auto">Alors vous n'êtes pas obligé de mettre ces deux formes de chargement bien qu'il soit utile, si vous ne mettez rien dans votre code qui va récupérer la ressource JS, il va l'exécuter en même temps que le chargement.<br />
<img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1518539318/limtvp8fb1b5ffzyc8bw.png" alt="schéma-script.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1518539318/limtvp8fb1b5ffzyc8bw.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1518539318/limtvp8fb1b5ffzyc8bw.png 2x" />
<hr />
<p dir="auto"><strong>· Me soutenir
<div class="table-responsive"><table>
<thead>
<tr><th>Nom<th style="text-align:center">Adresse
<tbody>
<tr><td><td style="text-align:center">
<tr><td>Dogecoin<td style="text-align:center"><code>D7DDz1hnvZT1tVESDXogbgz9jMj6EQxwsy
<tr><td>Bitcoin<td style="text-align:center"><code>18sFmr937hFDLmTZVJLEkRpuFtokNBqrLq
<tr><td>Dashcoin<td style="text-align:center"><code>Xt91cJfRG7kpDMiirJBcbXsJifBegGBEHf
<tr><td>Litecoin<td style="text-align:center"><code>LZHS7YFUkWRSUZgfnghSYfT6PRPUnNBSCo
<tr><td>Ecoin<td style="text-align:center"><code>e6QZqTFpPR92Sa5pmFoiZp8vFJ5z2XZD8s
<tr><td><td style="text-align:center">
<tr><td>Patreon<td style="text-align:center"><a href="https://www.patreon.com/thomasbnt" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://www.patreon.com/thomasbnt
<p dir="auto"><strong>· Me retrouver
<div class="table-responsive"><table>
<thead>
<tr><th>Nom<th style="text-align:center">Adresse
<tbody>
<tr><td><td style="text-align:center">
<tr><td>Mastodon<td style="text-align:center"><a href="https://mstdn.io/@thomasbnt" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://mstdn.io/@thomasbnt
<tr><td>Reddit<td style="text-align:center"><a href="https://reddit.com/u/Hyprimort" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://reddit.com/u/Hyprimort
<tr><td>Serveur Discord<td style="text-align:center"><a href="https://discord.gg/9gcxwVY" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://discord.gg/9gcxwVY
<tr><td>Envoyer un email<td style="text-align:center"><code>thomasbnt@protonmail.com
<tr><td>Site Web<td style="text-align:center"><a href="https://thomasbnt.fr/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://thomasbnt.fr/
<tr><td>En savoir plus sur moi<td style="text-align:center"><a href="https://thomasbnt.fr/about" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://thomasbnt.fr/about
<tr><td><td style="text-align:center">