🟢 EasyDOM & Events📖 Theory Question

What is the difference between async and defer for script loading?

💡

Hint

Both avoid blocking HTML parsing — async executes ASAP, defer after full parse

Full Answer

By default, <script> blocks HTML parsing while downloading and executing.

Attribute	Download	Executes when	Order
None (default)	Blocks HTML	Immediately, blocks	In order
async	Parallel	As soon as downloaded	NOT guaranteed
defer	Parallel	After HTML fully parsed	In document order

<!-- Blocks parsing ❌ (put in <head>) -->
<script src="app.js"></script>

<!-- Parallel download, executes ASAP when downloaded -->
<!-- ORDER NOT GUARANTEED — analytics.js might run before vendor.js -->
<script async src="analytics.js"></script>

<!-- Parallel download, runs after HTML parsed, IN ORDER ✅ -->
<script defer src="vendor.js"></script>
<script defer src="app.js"></script>
<!-- app.js always runs after vendor.js -->

When to use:

defer — most app scripts (DOM-dependent, order-dependent)
async — completely independent scripts (analytics, ads)

💡 type="module" scripts are deferred by default. In modern apps using bundlers, you usually put one deferred script tag pointing at the bundle.

More DOM & Events Questions

🟢 EasyExplain event delegation and why it is useful.→🟢 EasyWhat is the difference between event.stopPropagation() and event.preventDefault()?→🟢 EasyWhat is the difference between event bubbling and event capturing?→🟢 EasyHow do you create and dispatch Custom Events?→

Practice this in a timed sprint →

5 free questions, no signup required

⚡ Start Sprint