Skip to content

Asynchronous vs Deferred JavaScript

There are 3 ways how JavaScript can be loaded to a Website. The normal way, using the async attribute or the defer attribute.

Normal

<script src="/assets/js/bootstrap.min.js"></script>

In the normal way the parser stops, fetches the JavaScript files, executes it and continues with parsing the rest of the document.

This behavior is therefore render-blocking and can delay the overall page load if many and/or large resources need to be fetched.

Asynchronous

<script async src="/assets/js/bootstrap.min.js"></script>

In the asynchronous way, the async attribute need to be added to the <script> tag. This way, the script is fetched asynchronous without blocking the parser. Once the script is fetched, the parsing is paused to execute the script.

Deferred

<script defer src="/assets/js/bootstrap.min.js"></script>

In the deferred way, you need, like in the async way, add an attribute (defer) to the <script> tag. In this way, the script is fetched in the same way as in the asynchronous one, but doesn’t get executed until the parser has finished.

(source)

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.