Async Defer — JavaScript Loading Strategies

JavaScript is an essential part of any basic/modern web application and the strategies we decide to load it directly impacts the performance to a greater extent.

In this article, we will try understanding the important differences between each approach, pros & cons along with the performance implications and ways to optimize page interaction/load time.

For demonstration purpose — I am creating a website consisting of the following external dependencies. Just pay close attention to the respective file sizes, as file download time is directly proportional to that.

  1. HTML Page ~1 MB
    It contains the actual markup/content and will provide some placeholder [id=’output’] to show some dynamic output from JavaScript.

Now it’s time to analyze the various approaches 🕵🏻

Approach — 1 [scripts in head section]

In the first case, we will load all 3 scripts tag in the head section of our HTML.

1. HTML code

Below is the screenshot of the chrome Network tab analysis of the page once ready for user interaction.


  1. Code execution sequence of different JS files will be preserved in the order files were included in HTML. In current example, even though file2 & file3 were downloaded before file1, execution order will be correctly taken care.
1. Console window

So calling an user’s object method user.greet() inside file3.js will work perfectly fine and outputs “Welcome John Doe” message on console.


In this scenario — HTML parsing will be suspended until all the 3 scripts in head section are downloaded, parsed and executed. So,

  1. A plain white screen will be shown to the user even if the HTML file has been already downloaded [But not parsed]. This is definitely not a good user experience.
1. Main Window — Blank

2. NONE of the above scripts will be able to access/manipulate the HTML page as DOM is not yet ready.

// Below code will throw an Error
var output = document.getElementById('output');
output.innerText = 'Welcome message from JS - File 1';

One possible solution to handle this issue it to listen for DOMContentLoaded event and then execute your code after that.

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

document.addEventListener('DOMContentLoaded', function(event) {
// Put your DOM manipulation logic here

📌 Demo

Approach — 2 [scripts at the end]

To overcome the 2 issues faced in the first approach, let’s load all 3 scripts at the bottom of the body tag.

2. HTML code


  1. As HTML is parsed before downloading the scripts, so user will be able to see the actual content immediately instead of waiting for scripts.

2. As all the scripts are executed after parsing the HTML, so all of them can access the DOM for any manipulation.

3. Sequence of script execution is preserved.


No performance gain as such.

📌 Demo

Approach — 3 [using Async attribute]

<script src=”/javasctipt-file-path” asyn></script>

HTML5 introduced the async script attribute which helps in downloading the respective script files in-parallel on a different thread without impacting the HTML parsing.

However, the corresponding script will be parsed and executed as soon as it completes downloading regardless of whether or not HTML parsing has completed and will have the reference to DOM element until that particular point.

Here you can clearly see the file2.js has been downloaded before HTML file. However, while the browser is downloading file2, it didn’t pause the HTML parsing and because of that, by the time it was executed — it had reference to html placeholder to inject the dynamic content.

<span id="output2">Empty</span>


  1. As scripts will be downloaded on a different thread, the HTML parsing will not be paused and user will be able to see immediate content instead of White blank screen.


  1. Sequence of JS execution is NOT preserved. It is executed in the respective download order rather than the included script sequence inside HTML.

Note: Putting the scripts with async attribute at the bottom of body section will be of NO use and equivalent to Approach-2.

📌 Demo

Approach — 4 [using Defer attribute]

Defer script attributes it same as Async attribute except the respective scripts are parsed and execute ONLY after HTML parsing has been completed.

One very important point to be considered here is that Chrome doesn’t support defer yet and showing NO impact on the DOMContentLoaded duration. However, it is executing the scripts at the end of HTML parsing.


  1. Sequence of script import is preserved. So, file3.js executed only after file1 has completed downloading and execution even though file3 was downloaded before.


Initially I thought that defer would be better choice then Async but later found out that Chrome doesn’t support it yet [Version 71.0.3578.98] and having NO impact on the DOMContentLoaded duration.

📌 Demo

Here is more on the discussion :

However, it is working as expected on Firefox with significant improvement in the performance 🎯

🏁 Conclusion:

  1. Prefer keeping the scripts tags in the head section with async attribute for third party libraries which are in-depended like Google Analytics, Google reCAPTCHA or anything else which doesn’t need DOM access as the respective scripts are downloaded in parallel but executed immediately.

Please put your opinions and findings in the comment section and I will be glad to discuss further on that.

If you like this post and it was helpful, please click the clap 👏 button multiple times to show the support, thank you.



JavaScript Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store