Asynchronous and deferred JavaScript execution explained

async and defer are two attributes that a <script> tag can have (and are available in most modern browsers) and are quite useful. Usually you can specify when the JavaScript code should start executing by where you place the tags. Having all the script tags in your <head> will delay your page rendering quite a bit depending on the size of the files and execution time.

Normal <script> the default behavior of the <script> element and whenever the parser encounters a script tag, parsing the HTML code will be paused until the code is loaded and executed. For a page with multiple scripts this may mean a lot

Defered <script defer>

...means the file will load in parallel with the HTML parsing and its execution will be delayed for when the page is fully rendered, thus, the DOM will be available when the scripts starts running

Asynchronous <script async>

...means the file will load whenever, and the script will execute as soon as it's ready. The HTML parsing will pause if the scripts needs to run. Also, you can't rely on the order in which the scripts are executed using async


For a more visual description