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

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

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

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.

[sc name=”src” url=”https://bitsofco.de/async-vs-defer/” ]

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.