Async vs Defer in JavaScript: Which is Better?
Nimish Bhardwaj
Frontend Technical Lead @ eInfochips | Master's Degree, Angular, React, Typescript, JavaScript
A large chunk of the contemporary web is powered by the flexible language JavaScript. Regarding the optimization of web page performance, developers frequently discuss the use of async and defer properties in script tags. Though they accomplish this in slightly different ways, both aim to speed up page loads. This article will explore the distinctions between JavaScript's async and defer functions, offer examples of how to use each, and provide advice on when to use each.
Understanding defer and async
Let's first explore the functions of each attribute before comparing the two:
Async: The browser is instructed to fetch the script asynchronously while it continues to parse the HTML when the async attribute is present in a script element. The script will be executed as soon as it's downloaded, regardless of whether the HTML parsing is complete or not.
Defer: In a similar vein, the defer attribute permits asynchronous script downloads. Scripts that have the defer property, however, won't run until after HTML parsing is finished and before the DOMContentLoaded event is raised.
Async Example:-
<!DOCTYPE html>
<html>
<head>
<title>Async Example</title>
</head>
<body>
<script async src="script.js"></script>
<p>Content of the page</p>
</body>
</html>
Defer Example:-
Recommended by LinkedIn
<!DOCTYPE html>
<html>
<head>
<title>Defer Example</title>
</head>
<body>
<script defer src="script.js"></script>
<p>Content of the page</p>
</body>
</html>
Conclusions: -
Now, the question arises: which one is better? Well, it depends on the scenario:
Use async when:
Use defer when:
In a nutshell, by requesting scripts asynchronously, both async and defer characteristics help to speed up page loading times. Which option you choose will depend on the specifics of your project. When optimizing web page performance, developers can make well-informed judgments by being aware of their differences and use cases.
In conclusion, the context and needs of your project will determine which is best; there is no hard and fast rule on this. Developers can improve the user experience by optimizing the loading behaviour of scripts on their web pages by knowing the differences between async and defer.
Whether you're a seasoned developer or just dipping your toes into the world of web development, stay curious and keep exploring new techniques to enhance your projects. And if you found this article helpful, feel free to reach out and stay in touch for more insightful content.
For updates, tips, and engaging discussions on all things JavaScript and web development, follow us on Instagram at @learn_with_nimish.