<script defer> vs <script async>?

Options

1. They are identical in how they load and run
2. defer waits for parsing, in order; async does not (Correct option)
3. async blocks HTML parsing until it has run
4. defer only works on inline scripts in the page

Answer

defer runs after HTML parsing in document order; async runs as soon as it downloads, order not guaranteed

Why

A plain <script> stops the browser from reading the rest of the HTML until it downloads and runs.

Both attributes download in the background:

• defer: runs after the HTML is fully parsed, in the order the scripts appear. Best for your app code.
• async: runs as soon as it arrives, in any order. Fine for independent scripts like analytics.

Remember

App scripts → defer. Independent third-party scripts → async.

Key terms

• defer / async scripts
• HTML
• JavaScript
• DOM
• Core Web Vitals
• HTTP