🌟Boost Your Website Speed: Async vs. Defer in JavaScript Explained
Choosing Between Async and Defer
Table of contents
Have you ever considered speeding up your web page's loading time? The async and defer attributes can be used with the <script> tag to achieve this.
Both async and defer control how external scripts are loaded and executed. Both improve the page load by allowing the browser to download the script in the background while parsing the HTML content.
The difference between async and defer is when the script is executed.
Before diving into async and defer, let's understand how the browser loads scripts by default.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Default Behaviour</title>
<script src="./script.js"></script>
</head>
<body>
<img src="picture.png">
<h1>Default way of loading script</h1>
</body>
</html>
In the above example, we can see that the <script> tag is placed in the head section. Generally, the browser parses the HTML from top to bottom. If an image is encountered, it will be downloaded in the background, and the HTML parsing will continue.
This behaviour changes when the browser encounters the script tag in HTML. The browser parses until it reaches the script tag, then it stops parsing, downloads the script, executes it, and continues parsing.
The async and defer attributes allow us to modify the default behaviour of HTML parsing.
Async
Downloads the script concurrently with HTML parsing then executes it as soon as it's downloaded. While executing the script, HTML parsing will be stopped. There is no guarantee of when the script will be executed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Default Behaviour</title>
<script src="./script.js" async></script>
</head>
<body>
<img src="picture.png">
<h1>Default way of loading script</h1>
</body>
</html>
If multiple scripts are loaded asynchronously, they will execute as soon as they finish downloading, regardless of their order in the document.
Defer
Downloads the script concurrently but waits until after the HTML is parsed to execute it, preserving the order. Scripts are executed in the order they appear.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Default Behaviour</title>
<script src="./script.js" defer></script>
</head>
<body>
<img src="picture.png">
<h1>Default way of loading script</h1>
</body>
</html>
It will not disturb HTML parsing. Defer works just like placing the script tags just before the closing body tag.
When should you use each one?
Async
The script does not depend on other scripts.
The script does not modify the DOM.
You need to run the script as soon as it is downloaded.
Defer
When the script depends on another script or DOM
The order of execution matters.
💡 Pro Tip: Place your script tags just before the closing body tag () to ensure smoother page rendering and loading performance.
Conclusion
You can significantly improve your website's loading speed and overall performance by using the async and defer attributes wisely.
Thank you for taking the time to read this article 😊. I hope the article provided you with valuable insights. I would highly appreciate it if you took a moment to like 👍, share your thoughts or feedback comment ✍️, and share 🔁 it.
You can also follow me for more content on CSS, Javascript, React, Git and other web Development topics.
Happy Learning...! ✌️✌️✌️
For Paid collaboration, please mail me at: subramanyeshwarak@gmail.com
If you liked my content, Connect with me on, LinkedIn GitHub Twitter Instagram