The scripts in modern websites are heavier than HTML documents so it takes longer to download and process them.

When the browser loads HTML and comes across an HTML script tag it stops building the DOM temporarily and starts executing the script; the same happens for the external scripts: the browser must wait for the script to download and execute it and only then it can process the rest of the page.

However, it leads to two major issues:

• Script can’t see the DOM elements below the script tag.
• And, if there’s a heavy script at the top of the page, it blocks the page. And, users can’t see the content of the page until it downloads the script and executes it.

I’m pretty sure this must have come to the mind of 99% of people so why don’t we put the script just above the body tag so it can see the elements above it and doesn’t block the page content from displaying.

You’re right it’ll work fine for small projects but when you’re building big real-world projects this solution is far from perfect. Let’s say the browser notices the script and starts downloading it of course after downloading the HTML document. But for long HTML documents, this may cause delay. People with fast internet probably won't notice the difference but there are millions who still don't have fast internet it'll be noticeable for them.

So this solution is out of the picture as well.

So what should we do then to solve this problem?

And, here comes defer and async attributes. So, let’s discuss them in detail.

1. Async

• Async attribute is used to indicate to the browser that the script file can be executed asynchronously.
• The HTML parser doesn’t need to pause at the point it comes across a script tag to fetch.
• If an external script has an async attribute, the file can be downloaded while the HTML document is still parsing. Once it has been downloaded, the parsing is paused for the script to be executed.

2. Defer

• The defer attribute tells the browser to only execute the script file once the HTML document has been fully parsed.
• The Script file can be downloaded while the HTML document is being parsed. Although, even if the script is fully downloaded long before the document is finished parsing, the script won’t be executed until the parsing is complete.

Now comes the question: which attribute to use in my script tag? So let’s discuss this.

In many cases, the script file contains functionality that requires interaction with the DOM. In these cases, the DOM must be fully parsed before the script should be executed. From my personal experience defer is the most useful. Now you can put your script tag anywhere you want but the file script won’t be executed before the HTML document is completely parsed.