TaskAdd three scripts to the head: /analytics.js as async, /utils.js as defer, /app.js as defer. Order matters for defer scripts.
defer vs async (the right script attribute)
75 XP7 min
Theory
When to choose which
| Attribute | Download | Execute | Order preserved | Use for |
| (none) | blocking | immediately | yes | almost never |
async | parallel | as soon as downloaded | NO | analytics, ads, isolated 3rd-party |
defer | parallel | after HTML parsed | YES | your app code, dependency chains |
<!-- BAD β blocks page render --> <script src="/analytics.js"></script> <!-- GOOD β analytics doesn't depend on anything --> <script src="/analytics.js" async></script> <!-- GOOD β your app code, runs in source order --> <script src="/utils.js" defer></script> <script src="/components.js" defer></script> <script src="/app.js" defer></script>
Why "order preserved" matters
defer scripts run in source order β utils.js finishes before app.js starts. async runs whichever finishes downloading first β app.js might execute before utils.js, breaking your dependency chain.
ES modules are deferred by default
<script type="module" src="/main.js"></script>
type="module" implies defer. No need to add it. Modules also automatically run in source order.
Inline scripts
async/defer only work on EXTERNAL scripts (src="..."). Inline <script> blocks always run synchronously when parsed.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.