Async and defer, the difference.

• 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.

• Credits

  • cover_image rendered with random-background-image-with-unsplash and the spin from Fork Awesome
  • Post was written on Busy a few months ago and is written in French.