Understand Async and Defer with example.

Normal vs Deferred vs Async

The purpose of this article is to clear all doubts and questions related to defer and async execution of script.

What are the topics we will cover:

1. Difference in Async, Defer and Normal execution
2. Which one we should use and when
3. what will happen if we use both async and defer together in a script tag.
4. Performance comparison
5. Difference in Async, Defer and Normal execution: Both defer and async are boolean attribute, let see how to use them in script tag-

1.1 Defer:

<script defer src=”script1.js"></script>

<script defer src=”script2.js"></script>

Scripts with defer never block the page.

The defer attribute tells the browser not to wait for the script.

Instead, the browser will continue to process the HTML, build DOM. The script loads “in the background”, and then runs when the DOM is fully built.

It only triggers when the script is downloaded and executed.

Deferred scripts keep their relative order, just like regular scripts.

Let’s say, we have two deferred scripts: the script1.js and then script2.js:

Browsers scan the page for scripts and download them in parallel, to improve performance.

So in the example above both scripts download in parallel. The script2.js probably finishes first.

…But the defer attribute, besides telling the browser “not to block”, ensures that the relative order is kept. So even though script2.js loads first, it still waits and runs after script1.js executes.

That may be important for cases when we need to load a JavaScript library and then a script that depends on it

Async:

The async attribute is somewhat like defer. It also makes the script non-blocking. But it has important differences in the behavior.

The async attribute means that a script is completely independent:

• The browser doesn’t block on async scripts (like defer).
• Other scripts don’t wait for async scripts, and async scripts don’t wait for them.

In other words, async scripts load in the background and run when ready. The DOM and other scripts don’t wait for them, and they don’t wait for anything. A fully independent script that runs when loaded. As simple, as it can get, right?

Here’s an example similar to what we’ve seen with defer: two scripts script1.js and script2.js, but now with async instead of defer.

They don’t wait for each other. Whatever loads first (probably script2.js) – runs first:

<script async src=”script1.js”></script>

<script async src=”script2.js”></script>

Which one we should use and when:

• Async scripts are executed as soon as the script is loaded, so it doesn’t guarantee the order of execution (a script you included at the end may execute before the first script file )
• Defer scripts guarantees the order of execution in which they appear in the page.

asyncis great when we integrate an independent third-party script into the page: counters, ads and so on, as they don’t depend on our scripts, and our scripts shouldn’t wait for them.

defer is used for scripts that need the whole DOM and/or their relative execution order is important

What will happen if we use both async and defer together in a script tag:

if you specify both, async takes precedence on modern browsers, while older browsers that support defer but not async will fallback to defer.

Performance comparison:

Comparison of normal, defer and async