Async Defer Script

Async Defer

During web development need to care that the feature should run with no or minimum impact on site performance. JS bundle load and its execution play a significant role in site performance.

<script>

Let’s start by defining what <script> without any attributes does. The HTML file will be parsed until the script file is hit, at that point parsing will stop and a request will be made to fetch the file (if it’s external). The script will then be executed before parsing is resumed. It has bad impact on the user behaviour and overall site looks slow.

<script async>

async downloads the file during HTML parsing. Script execution starts after HTML parsing complete. The script execution is independent to order they introduced. The script which loaded first will be executed first.

<script defer src="https://script-async-defer/long.js"></script>
<script defer src="https://script-async-defer/small.js"></script>

<script defer>

defer downloads the file during HTML parsing and will only execute it after the parser has completed. defer scripts are also guaranteed to execute in the order they introduced in the document.