Difference between script, script-async, script-defer

In HTML, the <script> tag is used to embed a JavaScript script in your webpage.

You can modify the behavior of this tag by using the async and defer attributes.

Tag <script />

Script without any attributes is fetched and executed immediately, blocking the parsing of the rest of the HTML document until the script is loaded and executed.

Example:

<script src="script.js"></script>

Tag <script async />

The script will be fetched in parallel to the HTML parsing and executed as soon as it’s downloaded. This does not block the HTML parsing.

It's often used for analytics or ad network-scripts.

Example:

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

Tag <script defer />

The defer attribute fetches the script parallel to HTML parsing but delays its execution until after HTML parsing is complete. This ensures that the script and DOM work as intended.

Example:

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

Summary

• script is fetched and executed immediately, blocking the parsing of the rest of the HTML document until the script is loaded and executed.
• script-async is fetched and executed asynchronously, but the execution is deferred until after HTML parsing is complete.
• script-defer is fetched and executed asynchronously, but the execution is deferred until after HTML parsing is complete.