Javascript - JavaScript in HTML Asynchronous Scripts

Introduction

HTML5 introduces the async attribute for <script> elements.

The async attribute changes the way the script is processed.

async attribute applies only to external scripts and signals the browser to begin downloading the file immediately.

scripts marked as async are not guaranteed to execute in the order in which they are specified. For example:

<!DOCTYPE html> 
<html> 
<head> 
  <title>Example HTML Page</title> 
  <script type="text/javascript" async src="example1.js"></script> 
  <script type="text/javascript" async src="example2.js"></script> 
   </head> 
   <body> 
     <!-- content here --> 
   </body> 
</html> 

In this code, the second script file might execute before the first.

async indicates that the page need not wait for the script to be downloaded and executed.

It also signal that there is no need to wait for another script to load and execute.

It's recommended that asynchronous scripts not modify the DOM as they are loading.

Asynchronous scripts are executed before the page's load event and may execute before or after DOM Content Loaded.

For XHTML documents, specify the async attribute as async="async".