Cover image for Async and defer, the difference.

Async and defer, the difference.

thomasbnt profile image Thomas Bnt Updated on ・2 min read
  • Introduction

I recently had this problem with JavaScript files that slowed down a web page as soon as it was loaded. It's not nice to wait, I understand. That's why I looked at the history of async and defer.
Two different load modes, one that loads during the execution of the JS and the other that wait for everything to be loaded for the JS to run at the end.

  • Explanation of the different execution modes

As said before for the async, it loads during the analysis of HTML but also the execution of JavaScript. So he loads all of a sudden.
While defer, patiently waiting for the page loading and analysis of HTML, it runs at the last moment.

Schema of Async

Code example :

<script type="text/javascript" src="assets/js/init.js" async></script>

Schema of Defer

Code example :

<script type="text/javascript" src="assets/js/init.js" defer></script>
  • Without both, what's going on?

So you do not have to put these two forms of loading although it is useful, if you do not put anything in your code that will recover the JS resource, it will run at the same time as loading.

β˜• Check my Twitter account. You can see many projects and updates. You can also support me on BuyMeaCoffee.

Posted on by:

thomasbnt profile

Thomas Bnt


French web developer maintly but touches everything, servers, bots, community management, events, social networks and moore. I learn VueJs at this moment and MySQL. β€” Addict to Cappuccino and Music


Editor guide

Thanks you for reading πŸ˜‰