Introduction
In web development, the <script> tag is used to add JavaScript to an HTML page. Normally, when the browser finds a <script> tag, it pauses the page loading until the script is downloaded and executed. This can cause a page to load more slowly.
To solve this, HTML provides special attributes, such as async and defer. These attributes change the way JavaScript is loaded and executed. In this article, we will focus on the async attribute.
What Does async Mean?
The word async stands for asynchronous. When you use async with a script:
The script is downloaded at the same time as the HTML page continues loading.
Once the script is fully downloaded, it is executed immediately.
The browser does not wait for the whole HTML page to finish loading before running the script.
This helps make websites faster because scripts are not blocking the page.
Syntax of async
Here is how you use the async attribute:
<script src="script.js" async></script>
How Does async Work?
When a browser loads a web page with an async script, the process looks like this:
The browser starts reading the HTML page line by line.
When it finds <script src="file.js" async>, it starts downloading file.js in the background.
While the file is downloading, the browser continues reading the HTML and loading the rest of the page.
As soon as the script finishes downloading, the browser pauses the HTML parsing and immediately executes the script.
After running the script, the browser continues loading the remaining HTML.
Example Without async
<html>
<head>
<script src="script1.js"></script>
<script src="script2.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
The browser stops at script1.js, downloads it, runs it, then moves to script2.js.
Only after both scripts are done, it continues showing the rest of the page.
This makes the page load slower.
Example With async
<html>
<head>
<script src="script1.js" async></script>
<script src="script2.js" async></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Both scripts download while HTML keeps loading.
The browser executes whichever script finishes downloading first.
The execution order is not guaranteed.
When Should You Use async?
You should use the async attribute when:
The script is independent (does not depend on other scripts).
The script is not required for the initial page structure.
Examples: Analytics scripts, ads, tracking codes, social media widgets.
Using async makes these scripts load faster without slowing down the page.
When Should You Avoid async?
You should not use async if:
Your script depends on another script.
Your script needs the HTML page to fully load first.
Example: If script2.js depends on functions inside script1.js, async may cause errors because the browser may run script2.js first.
Difference Between async and defer
Itβs important to understand the difference between async and defer:
| Feature | async β‘ | defer π |
|---|
| Downloading | Happens while HTML loads | Happens while HTML loads |
| Execution | Runs immediately after download | Runs after HTML is fully loaded |
| Execution order | Not guaranteed | Guaranteed (runs in order) |
| Best for | Independent scripts | Scripts that depend on HTML or other scripts |
FAQs About async
1. Is async the default behavior?
No. By default, scripts block the HTML until they finish loading.
2. Can I use async and defer together?
Yes, but if both are present, browsers treat the script as async.
3. Which is better for performance, async or defer?
It depends:
Conclusion
The async attribute in the <script> tag helps make web pages load faster by downloading JavaScript in parallel with the HTML. The script runs as soon as it is downloaded, which improves speed but may cause problems if scripts depend on each other.
π Use async for independent scripts.
π Use defer if scripts must run after the HTML is ready.
By understanding how async works, web developers can improve both page performance and user experience.