JavaScript Tips #4 : Include JS Code Asynchronously in Your Web Page.

We can use JavaScript for easy validations. We can use JS Code to Validate something or to provide dynamic functionality to the webpage up to certain extent.
Lets Discuss the Scenario -

If Your JavaScript Code is included Synchronously -

  1. The script is fetched and executed immediately, before the browser continues parsing the page.
  2. Suppose the Script to be executed is 3rd party script then it may take some time to fetch the script and to execute the script.
  3. In the mean while user will have to wait for some time . If the 3rd party script is broken then it will remain in waiting state and Script will not be fetched properly.
  4. This results in User frustration and increase in your bounce rate.
<html>
    <body>
        <p>Hello World!</p>
        <script src="async.js" async="async"></script>
    </body>
</html>

Async Attribute in HTML5 - Asynchronoulsy Execute JavaScript

Explanation :

  1. Asynchronous Script will be executed asynchronously when browser is busy in parsing the page.
  2. Suppose Script with attribute “async” goes in a loop or locked in a deadlock then it does not affect the loading or parsing of the page.
  3. “Async” attribute is used for external scripts only.
  4. “Async” attribute is not supported in “Internet Explorer“.
  5. The async attribute is newly added in HTML5