Here we will see the difference between ‘async’ vs ‘defer’ attributes in JavaScript and also learn about how and when to use them.

‘async’ and ‘defer’ are boolean attributes which we use along with script tags to load external JavaScript libraries efficiently into our web page.

How things work without these attributes?

I am going to assume that you know about how the stuff works when a user requests a web page. If you don’t know how things work or you want to quickly revise the concept again, please take a look at this nicely explained article. When the web page is loaded, the web browser looks at the entire HTML document and looks for any CSS, JavaScript and images that are referenced by that page. This is what we refer as HTML Parsing. If resources are found in the HTML, the web browser then requests each of those resource files from the server. Once the web browser has the required resources it can start building the page. Now one of the important things is how the scripts are loaded. Typically JavaScript is considered as a Parser blocking language. Why? Lets understand this.

The web browser starts parsing the HTML and it gets paused when the script tag is reached (here I am strictly talking about external JS Files and not the inline scripts). At that point, parsing of HTML is blocked and browser makes a request to fetch/download the respective script file. Once the script is fetched, it gets executed and then HTML parsing resumes again.

But this is not good as the JavaScript files are blocking the rendering of HTML. So this is where we can introduce our two attributes ‘async’ and ‘defer’.

How to use ‘async’ attributes?

With async (asynchronous) attribute, the HTML parsing continues until the browser fetches the script file over the network so parsing and script fetching happens in parallel (as shown in the figure below). Once the scripts are available in the browser, HTML parsing is paused and scripts are executed. Once the execution is complete, HTML parsing continues.

So this is an asynchronous way of downloading scripts. Lets look at the ‘defer’ attribute now.

How to use ‘defer’ attributes?

The word ‘defer’ in English means to ‘hold back’. So with defer attribute mentioned in the script tag, the script files are downloaded in parallel while the HTML parsing continues. But the execution is deferred until the HTML parsing is done. In simple words, the downloaded scripts are executed only when the browser finishes its HTML parsing.

Now that you have learnt how to use async and defer attributes, the important question is when to use them?

When to use ‘async’ and when to use ‘defer’?

Well, you can use async attribute when your page does not depend on the script files (for example analytics). Why? Because async cannot guarantee the order in which your scripts files will be downloaded. So if there is any dependency amongst your script files, it may break your code. In such cases you can use defer attribute.

Final Thoughts

Now that we have async and defer attributes, we can put our script references in head tag and as this allows your scripts to be downloaded asap without blocking your browser. If you are not using these keywords, make sure to put it at the bottom before closing your body tag. This will ensure that the HTML parser is not blocked by the scripts.

References:

• Post by Joseph Zacek josefzacek.cz/blog/whats-the-difference-bet..

• Video tutorial by Akshay Saini youtube.com/watch?v=IrHmpdORLu8

• Post on Bits of Code bitsofco.de/async-vs-defer