What are defer and async attributes on a <script> tag?

If neither attribute is present, the script is downloaded and executed synchronously, and will halt parsing of the document until it has finished executing (default behavior).

Scripts are downloaded and executed in the order they are encountered.

What are defer and async attributes on a <script> tag? (Cont...)

The defer attribute downloads the script while the document is still parsing but waits until the document has finished parsing before executing it, equivalent to executing inside a DOMContentLoaded event listener. defer scripts will execute in order.

What are defer and async attributes on a <script> tag? (Cont...)

The async attribute downloads the script during parsing the document but will pause the parser to execute the script before it has fully finished parsing. async scripts will not necessarily execute in order.

What are defer and async attributes on a <script> tag? (Cont...)

Note: both attributes must only be used if the script has a src attribute (i.e. not an inline script).

<script src="myscript.js"></script>
<script src="myscript.js" defer></script>
<script src="myscript.js" async></script>

What are defer and async attributes on a <script> tag?

By Code 100mph

What are defer and async attributes on a <script> tag?

  • 146