What is the difference between a normal <script>, async, defer and type="module"?

They differ in whether they block the HTML parser and when they run.

Normal script: it blocks the HTML parser while it downloads and runs.

async: the script downloads in parallel with parsing. It runs as soon as it arrives, and it pauses the parser at that moment. Async scripts run in whatever order they finish. So they suit independent scripts like analytics.

defer: the script downloads in parallel. It runs after the document is parsed, just before DOMContentLoaded. Deferred scripts run in document order. This suits app code that needs the DOM or depends on other scripts.

type="module": module scripts have these features:

• They are deferred by default.
• They can use import.
• They run in strict mode, with their own scope.
• The browser fetches them with CORS (the cross-origin permission check).

Adding async to a module makes it run as soon as it and its imports are ready. defer and async have no effect on inline classic scripts.