Defer vs Async Attributes

Async and Defer may look to have the same function but they are actually quite different. Usually its best to use Defer even though Async looks tastier😁. Though that's not to say you can't use Async. In this post I'll speak about what they both do and when you should use either one. So, let's begin.

SCRIPT TAG IN THE HEAD WITH NO ASYNC OR DEFER
Before we begin looking at script loading with async and defer, lets look at a script tag with none of them loaded in the head of the document.

An example could look like this:

<head>
<script src = "index.js"></script>
</head>

When the browser is typically parsing an HTML document, it will stop parsing the HTML doc the moment it encounters a <script> tag in the head. The browser will be forced to download parse the entire <script> tag and evaluate it. Only then can the HTML parsing continue.

Here is a diagram I made to illustrate:

The problem is that large scripts can cause the DOM to stop loading. This can provide a very unsatisfactory user experience.

SCRIPT TAG IN THE BODY WITH NO ASYNC OR DEFER
However, when the <script> is placed at the end of the body tag, like so:

<head>
<title>JS Script Loading</title>
</head>
<body>
<p>Some Content</p>
<script>
</body>

The HTML parsing will be carried out first then the <script> is fetched and executed like so:

SCRIPT LOADING IN THE HEAD WITH ASYNC
When loading <script> with Async the browser will fetch and download the <script> as it is parsing the HTML. It will only pause the HTML parsing when it wants to execute the <script>:

SCRIPT LOADING IN THE HEAD WITH DEFER
Jus like with Async, Defer will fetch and download the <script> as it parsing the HTML. However, Defer is different from Async in that it will complete the HTML parsing before it executes the script:

DEFER vs ASYNC
Both Asnyc and Defer load scripts without blocking the DOM, but they have two main differences:

Async does not load scripts in order while defer does. This means that if you have three scripts loaded like this:

<script async src="script1.js"></script>
<script async src="script2.js"></script>
<script async src="script3.js"></script>

Async can randomize the order of execution while defer will respect the sequence order.

Defer waits for the DOM (Document Object Model) while Async does not. Defer will wait for the DOM to fully load before it executes. Async will not. This means if your script requires the DOM you should use defer. If you use Async in this scenario you stand the chance that element you need cannot be found which can lead to bugs.

Here are some general rules on when to use either:

If the script does not rely on any other scripts or if it does not require the DOM then you can use Async.
If you want to load scripts in the middle of your HTML you can use Async. Since the DOM is already present, the script can be executed immediately without any problems.
You should use defer for all other scripts because:
It gets loaded ASAP which reduces load time.
It respects the script order letting you structure which script will come first.
It only executes once the DOM is ready.

CONCLUSION
In conclusion, it usually better to use defer because it has more advantages over Async in most use cases even though Async can sound much better.

If you found this article useful or if you spotted an error drop me a line in the comments i'd love to hear you opnions😁.

Blog

Defer vs Async Attributes

Shem Jaoko

Join Our Newsletter. No Spam, Only the good stuff.

Related