Async V/S Defer attributes in javascript

Async and defer are boolean attributes that are used along with the script tag to load the external scripts efficiently into our webpage.

Normal Script: Suppose the browser is loading a webpage and parsing the HTML line by line and suddenly encountering a script tag then what happens is the browser stops the parsing at that point of time and then fetches the script from the network and gets executed then and there. When the script is fetched from the network and executed into the browser then the HTML parsing will continue to parse only when the script is executed.

Async Script: Meanwhile HTML parsing is going on then the script with async tag will execute along with the HTML parsing. While the HTML parsing is going on then the script is fetched from the network asynchronously. As soon as the script is fetched and available in the browser then the HTML parsing stops and scripts are executed then and there. Once the script is executed then HTML parsing continues like regular.

Defer Script: HTML parsing continues and scripts are fetched in parallel from the network. The HTML parsing is continued and the script will only be executed only once the HTML parsing is fully completed.