Describe the difference between <script>, <script async> and <script defer>

The difference is related to how and when JavaScript scripts are downloaded and executed while parsing an HTML document.

At the time of parsing an HTML document, when the parser finds a <script> tag, it sends a new request to the src url and downloads the file. By default, it then executes the script in the file right away. The HTML parser has to stop until both download and execution of the script is completed.

Using async, as in <script async>, downloads the file asynchronously in the background, i.e. in parallel with HTML parsing. But execution of the script continues as soon as the script is downloaded and made available to the browser engine. Execution of the script blocks HTML parsing with async as well.

<script defer>, however, downloads the script asynchronously, and its execution is deferred until the entire HTML document is parsed.

Using defer is therefore parser non-blocking, while <script> only and <script async> are parser-blocking.

---

References

1. <script>: The Script element
2. How the browser renders a web page? — DOM, CSSOM, and Rendering