Choosing the Right Script Loading Strategy: Async vs Defer in JavaScript

In this blog, we are going to learn about async and defer attributes in javascript. So async and defer are boolean attributes in javascript which are used along with script tag to load the external scripts efficiently in our web page. We can load scripts three ways in javascript first by simply using the script tag second by passing async in the script tag and third and last by passing defer in the script tag. Let's see each one with an example.

Default script loading :
```
 <!DOCTYPE html>
 <html>
   <head>
     <title>Default one is here for you</title>
   </head>
   <body>
     <script src="someweirdscript.js"></script>// Only focus here
   </body>
 </html>
```
By default script loading as soon as the parser reaches the someweirdscript.js

script tag then it will download and execute the someweirdscript.js script first and then it will continue with the rest of the page. Here the someweirdscript.js

file is blocking the page rendering until it has been downloaded and executed.
Loading script with async attribute :
```
 <!DOCTYPE html>
 <html>
   <head>
     <title>Lets be litte better with async</title>
     <script async src="somegoodscript.js"></script>
   </head>
   <body>
      <div>something like anything</div>
   </body>
 </html>
```
In the above example, we are using the async attribute tag in somegoodscript.js

script tag and because of that as soon as the parser reaches to this script tag line it will start downloading the script but now it won't wait until the script is done with downloading and execution part rather it will continue with the rest of the page rendering and as soon as the script is downloaded it will execute. See one thing to note here the script is downloaded and the still parser has 1000 more lines of code to execute then it will give priority to the script because it's already downloaded. One benefit over default script is that async does not stop the execution of other code while the script is being downloaded it only blocks when the script execution part comes. So here script downloading part and page rendering part goes simultaneously. But the other side we need to understand that order of script execution is not guaranteed because it depends on script download time so in some cases it may get executed in between renderings and in some came it may get executed at last.

Mainly we use async for different third-party scripts such as social media buttons or analytics tracking codes but as we know that with async the order is not guaranteed then we need to make sure that we don't use async when we have scripts that are dependent on other scripts because we don't know which one will be finished first.

Loading script with async attribute :
```
 <html>
   <head>
     <title>Mostly you will use me believe it or not</title>
     <script defer src="bestscript.js"></script>
   </head>
   <body>
   </body>
 </html>
```
In the above example, we are using the defer with defer the execution will be never blocked yes you heard it right when we use defer then when the parser reaches to bestscript.js script tag then it will simply start the downloading part of the script but it won't even wait until the download finishes it will just continue with rest of the code execution to render the web page and once the page is loaded then and only then it will execute those script and this is the biggest advantage of using defer because here the order of execution is guaranteed as it loads all the scripts at last once we are done with rendering part.

That's all about Async vs Defer in JavaScript. And thanks to Akshay Saini for creating an incredible playlist this blog is just whatever learning I had from there.

haresh lakhwani's Blog

haresh lakhwani's Blog

Choosing the Right Script Loading Strategy: Async vs Defer in JavaScript