What is the difference between script, script async and script defer?

Summary

A plain script blocks HTML parsing while it downloads and runs. async downloads in parallel and runs as soon as it arrives, in no guaranteed order. defer downloads in parallel and runs after parsing finishes, in document order, before DOMContentLoaded.

Longer Answer

Use defer for your application scripts that depend on the DOM or on each other; use async for independent third-party scripts such as analytics. type="module" scripts are deferred by default. Placing scripts at the end of body was the old workaround.

Key Points

• Plain: blocks parsing.
• async: runs when ready, any order.
• defer: after parsing, in order.
• Modules are deferred by default.

Deep dive: Modern HTML5 in Production: Render-Blocking Scripts

What interviewers look for

Ordering guarantees and when to use each.

Follow-up questions

• What does type=module change?