AceDevHub
Intermediate JavaScript Interview QuestionsIntermediateComparison

JavaScript · Question 55

What is the difference between script async, script defer, and type="module" in the browser?

Direct answer

For classic external scripts, async executes as soon as the download is ready without preserving document order, defer waits until parsing finishes and preserves deferred-script order; module scripts are deferred by default unless async is specified.

Without special attributes, a classic external script encountered during HTML parsing can block further parsing while it is fetched/executed. async and defer let downloading overlap with HTML parsing but differ in execution timing and ordering.

  • async — execute as soon as ready; useful for independent scripts where ordering relative to other scripts/DOM parsing is not required.
  • defer — execute after parsing completes and before DOMContentLoaded; deferred classic scripts preserve document order.
  • type="module" — module scripts are deferred by default, have module scope, use strict semantics, and can use import/export; async changes the default scheduling behavior for external modules.