The async and defer Attributes
Load scripts without blocking HTML parsing.
The async and defer Attributes is a free HTML Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.
Default Script Behavior
A plain <script src="..."> without async or defer blocks HTML parsing while it downloads and executes. The render of everything below the script is paused, which is why scripts traditionally lived at the bottom of <body>.
async Downloads in Parallel
<script async src="..."> downloads the script in parallel with HTML parsing and executes it as soon as it arrives. Execution still pauses HTML parsing, but only briefly — the script does not block the download of other resources.
async Execution Order is Unpredictable
Two async scripts run in whatever order finishes downloading first. Never use async for scripts that depend on each other (jQuery before jQuery plugin) because the dependency may run before the prerequisite is available.
defer Waits for HTML
<script defer src="..."> downloads in parallel like async but execution is delayed until the HTML is fully parsed — just before the DOMContentLoaded event. The script never blocks parsing.
<script defer src="app.js"></script>
<script defer src="analytics.js"></script>defer Preserves Order
Multiple defer scripts execute in their declaration order, just like normal scripts at the end of body. This makes defer the right choice for dependent scripts: utilities load before consumers without manual orchestration.
Choosing Between async and defer
Use async for independent third-party snippets (analytics, ads) that do not touch the DOM and have no dependencies. Use defer for your own application code that needs the DOM and depends on other scripts.
Modules Are Deferred by Default
<script type="module"> behaves like defer automatically — it downloads in parallel, executes after parsing, preserves order. Adding defer to a module is allowed but redundant; adding async opts back into async behavior.
Inline Scripts Ignore async/defer
async and defer apply only to external scripts (with src). An inline <script> tag executes immediately regardless of the attributes, so the attributes are silently ignored for <script>console.log(1)</script>.
Placement Becomes Less Critical
With defer (or modules), <script> tags can live in the <head> without blocking parsing — and putting them there lets the browser discover and start downloading them earlier than at the bottom of <body>.
<head>
<script defer src="app.js"></script>
</head>Combining with preload
For latency-sensitive scripts, pair <link rel="preload" as="script" href="..."> in the head with a deferred <script> below. The preload starts the download immediately while defer ensures execution order remains correct.
Common Pitfall
Marking a script async without verifying it has zero dependencies is the most common cause of "works on my machine, breaks in production" race conditions. When in doubt, prefer defer — it is forgiving where async is brutal.
Knowledge Check
What is the difference between async and defer for two scripts where the second depends on the first?
Summary
async and defer both download scripts in parallel with HTML parsing. async executes immediately on arrival in unpredictable order — use for independent third-party snippets. defer executes after parsing in declaration order — use for application code with dependencies. Modules default to defer behavior.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “The async and defer Attributes” lesson free?
Yes — any 3 lessons of the HTML Academy learning path, including “The async and defer Attributes”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.
What will I learn in “The async and defer Attributes”?
Load scripts without blocking HTML parsing. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.
How long does the “The async and defer Attributes” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The async and defer Attributes
- Preload Prefetch and Preconnect
- Lazy Loading Images loading=lazy
- Resource Hints modulepreload