<script defer> vs <script async> – Detailed Explanation
Step 1: Understanding How Browsers Load Scripts
When a browser encounters a <script> tag in an HTML file, it downloads and executes the JavaScript. However, the way scripts are downloaded and executed can block or optimize page rendering.
By default, <script> behaves synchronously:
- The browser pauses rendering when it finds a
<script>tag. - The script is downloaded.
- The script is executed.
- The browser resumes rendering.
This means large scripts can delay page rendering and make a website feel slow.
✅ Solution:
To improve performance, we use defer or async to control how scripts are loaded.
Step 2: What is <script defer>?
✅ Definition:
- Downloads the script in parallel with HTML parsing.
- Executes the script AFTER the entire HTML is fully parsed.
- Maintains the order of execution if multiple
deferscripts exist.
How <script defer> Works
- The browser finds a
<script defer>tag. - It downloads the script without blocking HTML rendering.
- Once HTML parsing is complete, all deferred scripts execute in order.
Example of <script defer>
<!DOCTYPE html>
<html lang="en">
<head>
<script defer src="script1.js"></script>
<script defer src="script2.js"></script>
</head>
<body>
<h1>Page Content</h1>
</body>
</html>
✅ Key Features:
- Scripts execute after HTML parsing finishes.
- Scripts maintain execution order (
script1.jsruns beforescript2.js).
Step 3: What is <script async>?
✅ Definition:
- Downloads the script in parallel with HTML parsing.
- Executes the script as soon as it’s ready, without waiting for HTML parsing to finish.
- Does NOT maintain execution order if multiple
asyncscripts exist.
How <script async> Works
- The browser finds a
<script async>tag. - It downloads the script without blocking HTML rendering.
- Once download is complete, it pauses HTML parsing and executes the script immediately.
- Then it resumes HTML parsing.
Example of <script async>
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="script1.js"></script>
<script async src="script2.js"></script>
</head>
<body>
<h1>Page Content</h1>
</body>
</html>
❌ Potential Issue:
- Scripts execute whenever they finish downloading, so
script2.jsmight run beforescript1.js, leading to unexpected behavior.
Step 4: Differences Between defer and async
| Feature | <script defer> | <script async> |
|---|---|---|
| HTML Parsing | Continues while downloading the script | Continues while downloading the script |
| Execution Timing | Executes after HTML parsing completes | Executes immediately after download |
| Execution Order | Scripts execute in order | Scripts execute as soon as ready (random order) |
| Blocking HTML? | No | Yes (Pauses parsing when executed) |
| Best for: | Scripts that depend on DOM | Independent scripts (e.g., analytics, ads) |
Step 5: When to Use <script defer> vs <script async>
✅ Use <script defer> When:
- The script modifies the DOM.
- The script depends on other scripts and needs to maintain execution order.
- The script should not block HTML rendering.
🔹 Example:
<script defer src="main.js"></script> <!-- Needs the DOM to be fully loaded -->
✅ Best for:
- Scripts that interact with elements (
document.getElementById,addEventListener). - Scripts that load libraries before execution (
jQuery,React).
✅ Use <script async> When:
- The script does NOT depend on the DOM.
- The script does NOT depend on other scripts (order doesn’t matter).
- The script should load independently and as fast as possible.
🔹 Example:
<script async src="analytics.js"></script> <!-- Doesn't need the DOM -->
✅ Best for:
- Google Analytics
- Facebook Pixel
- Ads and tracking scripts
Step 6: Special Case – Using Both defer and async
Technically, you cannot use defer and async together on the same script.
🔹 What happens if you do this?
<script async defer src="script.js"></script>
- Most browsers treat
asyncas the priority. - The script will run immediately after downloading, ignoring
defer.
✅ Best practice: Choose either defer OR async, depending on your use case.
Step 7: What Happens Without async or defer?
If you use a plain <script>, it:
- Blocks HTML parsing.
- Downloads the script.
- Executes the script.
- Resumes HTML parsing.
🔹 Example:
<script src="script.js"></script>
❌ This delays page rendering if script.js is large.
✅ Better Alternative:
<script defer src="script.js"></script>
💡 This allows HTML to load without being blocked.
Step 8: Performance Impact – Which is Better?
| Scenario | Best Choice |
|---|---|
| Page with large scripts that modify the DOM | defer |
| Third-party tracking scripts (Google Analytics, ads) | async |
| Inline small scripts that must execute immediately | Regular <script> |
| Multiple scripts that depend on execution order | defer |
| Scripts that don’t interact with the DOM (e.g., API calls) | async |
Final Thoughts
| Question | Answer |
|---|---|
Does defer block HTML parsing? | No |
Does async block HTML parsing? | No (while downloading), Yes (when executing) |
Does defer guarantee script execution order? | Yes |
Does async guarantee script execution order? | No |
| Which is best for DOM-dependent scripts? | defer |
| Which is best for independent scripts (e.g., analytics)? | async |
🚀 Best Practice Recommendation:
- Use
<script defer>for most JavaScript files. - Use
<script async>only for scripts that do NOT depend on other scripts or the DOM.
By following these guidelines, you ensure fast-loading, non-blocking, and well-organized scripts on your website!