Web Fundamentals

Script Loading: async vs defer

easyWeb Fundamentals

Script Loading: async vs defer

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

TL;DRRegular script blocks parsing • async = parallel + immediate execution (unordered) • defer = parallel + after parsing (ordered)
Very High Signal
Google
Meta
Atlassian
Netflix
30-Second Answerstart every interview with this

Script loading attributes control parser blocking, download behavior, and execution timing. A plain <script> blocks HTML parsing. async downloads in parallel and executes as soon as ready (no order guarantee). defer downloads in parallel and executes after HTML parsing completes, in document order. type=module scripts are deferred by default.

The HTML parser is the main builder. A regular script stops the entire crew until it finishes. async workers arrive independently and start working the moment they show up. defer workers arrive early but wait politely until the main structure (HTML) is complete before starting, in the order they were hired.

Parser encounters <script>
Regular: Block & Execute
async: Download parallel → Execute ASAP
defer: Download parallel → Execute after parse (ordered)
type=module: Behaves like defer by default

1Regular Script (No Attribute)

Blocks HTML parsing completely. The browser fetches and executes the script immediately before continuing to parse the rest of the document. Use only when you truly need blocking behavior.

index.htmlhtml
<script src="app.js"></script>   <!-- parser-blocking -->

2The async Attribute

Downloads in parallel while parsing continues. Executes as soon as the script is ready — order is not guaranteed. Can still interrupt parsing when it runs. Best for independent scripts like analytics or ads.

index.htmlhtml
<script async src="analytics.js"></script>

3The defer Attribute

Downloads in parallel. Execution is delayed until HTML parsing is complete. Multiple defer scripts execute in document order. Ideal default for most application code that needs the DOM or predictable ordering.

index.htmlhtml
<script defer src="vendor.js"></script>
<script defer src="app.js"></script>

4Module Scripts (type=module)

Modern ES modules are deferred by default. They download in parallel and execute after parsing. Adding async makes them execute as soon as ready (like classic async). defer attribute has no additional effect.

index.htmlhtml
<script type="module" src="app.js"></script>
<!-- async module -->
<script type="module" async src="utils.js"></script>
Key Takeaways
  • ✓defer is the safest default for most application JavaScript
  • ✓async is ideal for independent scripts (analytics, ads)
  • ✓Regular scripts should be used sparingly — only when blocking is required
  • ✓type=module scripts are deferred by default
  • ✓Choose based on: Do you need order? Do you need the DOM? Is the script independent?