Async & Defer In Javascript

While adding scripts into HTML code, we will use tag

<script src='./main.js' />

When the browser reaches the script line, it will run the script, even if it's internal or external scripts, it will pause the execution of HTML, so the script can't perform dom-manipulation because HTML wasn't rendered completely, it will become a performance issue, it will also cause the user to wait for a long time if the scripts are larger in size.

So, Javascript provides us with two attributes

1. Async
2. Defer

Async

<script async src='./main.js' />

This attribute will help browsers to download the script asynchronously, while HTML is getting rendered by the browser at the same time, when scripts get downloaded, as soon as the script gets executed by the browser, that pauses browser to render HTML code, this may also cause performance issues, if scripts file are smaller to get downloaded, it may be downloaded before complete rendering of HTML code. In other words, async scripts load in the background and run when ready.

Defer

<script defer src='./main.js' />

This attribute will help browsers to download the script asynchronously, while HTML is getting rendered by the browser at the same time when scripts get downloaded, it won't get executed by the browser until Html code was rendered completely. After DOM completes their first render, then only the script start his execution The defer attribute is only used in external scripts, it will be ignored in internal scripts.

Thank you, please refer to the internet, use below link to understand it deeply https://javascript.info/script-async-defer

See you in the next post, will connect with you :sparkles: