Async vs Defer in javascript

here is the different way of execution of javascript in async and defer -> async block HTML parsing due to script execution but defer does not block HTML parsing.

async and defer are two attributes that can be used in HTML script tags to control the loading and execution of external JavaScript files.

async and defer are both used to improve page loading performance by allowing the browser to continue rendering the page while the JavaScript file is being loaded.

Here are the differences between async and defer:

1. async: When the async attribute is added to a script tag, the browser will load the JavaScript file asynchronously, which means it will not block the rendering of the page. The script will execute as soon as it is loaded, which may be before the entire page has finished rendering. This makes async a good option for scripts that do not depend on other scripts or on the DOM.
2. defer: When the defer attribute is added to a script tag, the browser will load the JavaScript file asynchronously, but it will not execute the script until the entire page has finished rendering. This ensures that the script does not block the rendering of the page. This makes defer a good option for scripts that depend on the DOM or on other scripts.

In general, async is faster than defer because it does not wait for the entire page to finish rendering before executing the script. However, defer ensures that the script executes in the correct order, which can be important for scripts that depend on other scripts or on the DOM.

It's also important to note that neither async nor defer guarantees the order in which scripts are executed if multiple scripts are used with these attributes on the same page. Therefore, it's important to make sure that scripts are designed to work independently of each other and do not rely on a specific execution order.