HTML Academy · Lesson

The async and defer Attributes

Load scripts without blocking HTML parsing.

The async and defer Attributes is a free HTML Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

Frequently asked questions

Is the “The async and defer Attributes” lesson free?

Yes — the full text of “The async and defer Attributes” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

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

← Back to HTML Academy