Classic scripts are affected by the async and defer attributes, but only when the src attribute is set. Authors should omit the type attribute instead of redundantly setting it.
In <script>, the script is a classic script, to be interpreted according to the Javascript Script top-level production. Classic scripts are affected by both the async and defer attributes, but only when the src attribute is set.
In <script type=’module’>, the script is a JavaScript module script, to be interpreted according to the Javascript Module top-level production. Module scripts are not affected by the defer attribute, but are affected by the async attribute.
In <script type=’importmap’>, the script is an import map, containing JSON that will be used to control the behavior of module specifier resolution. Import maps can only be inline, i.e., the src attribute and most other attributes are meaningless and not to be used with them.
script element.The nomodule attribute is a boolean attribute that prevents a script being executed in user agents that support module script. This allow selective execution of module scripts in modern user agents and calssic scripts in older user agents.
The async and defer attributes are boolean attributes that indicate how the script should be evaluated. Classic scripts may specify defer or async. While module scripts may specify the async attribute, but must not specify the defer attribute.
| Classic scripts | Module script | |
|---|---|---|
| no any attribute passed | the scripted is fetched and evaluated immediately, blocking parsing until these are both complete | The module script and its dependencies will be |
fetched in parallel to parsing
evaluated when the page has finished parsing | | async | the classic script will be
fetched in parallel to parsing
the module script will be evaluated as soon as it is available | the module script and all dependencies will be
fetched in parallel to parsing
the module script will be evaluated as soon as it is available | | defer | The classic script will be
fetched in parallel
evaluated when the page has finished parsing | x (module script has no defer option, due to the original one works like defer) |
<script> tags are used to include Javascript on the web page. The async and defer attributes are used to change how/when the loading and the execution of the script happens.