Async vs Defer in JavaScript

While working with JavaScript, it’s very important to understand the difference between async and defer attributes of script tag. These help us optimize our page speed, prevent unintentional issues and rank better in different analytics.

Difference between async & defer

Both async and defer attributes allow the browser to continue parsing the HTML document while scripts are downloaded, but they differ in when those scripts are executed. Two major differences are

• While async scripts are executed as soon as they are downloaded, defer scripts execute after the page has finished loading and before DOMContentLoaded event.
• async scripts don’t maintain any particular order while defer scripts will be executed in same order they are enqueued.

In this visual representation, we can see how different attributes of script tag work

Which one should be used

async is suitable for high-priority scripts that should run as soon as it’s available to the browser. Independent scripts that don’t rely on other resources should use async .

defer is ideal for general JavaScript resources that aren't critical to the initial rendering of the page and can be run later in the loading process.