Async & Defer, la différence.

in #javascript7 years ago

async-et-defer.jpeg

· Introduction
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 async et le defer.
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.


· Explication des différents mode d'exécution

Comme dit précédemment pour l'async, il se charge pendant l'analyse du HTML mais aussi l'exécution du JavaScript. Donc il charge tout d'un seul coup.
Tandis que defer, lui attends patiemment le chargement de la page et de l'analyse du HTML, il s'exécute au dernier moment.

Schéma du Async
schéma-async.png

Schéma du Defer
schéma-defer.png


· Sans ses deux, il se passe quoi?

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.
schéma-script.png


· Me soutenir

NomAdresse
DogecoinD7DDz1hnvZT1tVESDXogbgz9jMj6EQxwsy
Bitcoin18sFmr937hFDLmTZVJLEkRpuFtokNBqrLq
DashcoinXt91cJfRG7kpDMiirJBcbXsJifBegGBEHf
LitecoinLZHS7YFUkWRSUZgfnghSYfT6PRPUnNBSCo
Ecoine6QZqTFpPR92Sa5pmFoiZp8vFJ5z2XZD8s
Patreonhttps://www.patreon.com/thomasbnt

· Me retrouver