Benjie

Efficient Script Loading in Javascript

Efficient Script Loading in Javascript

Understanding Defer and Async Script Loading

Areo Benjamen's photo
Areo Benjamen
·

3 min read

Table of contents

Introduction

Loading scripts is an important aspect of developing web applications. Scripts, usually written in Javascript (for the web) contain our application logic, the engine powering the functionality of our websites, e.g what happens when you click a button or submit a form. Without the script, the average website is nothing but a presentation of text and images.

In this article, we will discuss and illustrate ways of loading scripts efficiently for maximal performance. We cannot just place our script anywhere in the HTML, as we will see shortly.

Prerequisites

Basic knowledge of HTML and Javascript is required to follow through with the article.

Methods of Loading Scripts

There are three major ways to load scripts in any web project:

  • Regular

  • Async

  • Defer

Regular

This is the most common method used to include Javascript in the HTML file. It involves including the <script> tag in the head section of the HTML.

<html>
    <head>
        <script src="script.js"/>
    </head>
<html>

In this case, the process of loading the webpage will look like this:
Parsing HTML -----> Waiting to Fetch & Execute Script ----> Finish Parsing HTML.

This is not advisable, for performance reasons. We do not want a waiting period for fetching and executing scripts.

Solution.

To solve this, we include the script tag just before the </body> tag in the HTML.

<html>
    <body>
        <script src="script.js"/>
    </body>
<html>

In this case, the process of loading the webpage will look like this:
Parsing HTML -----> Fetch Script ----> Execute Script

Async

This is an asynchronous way of loading scripts. What exactly does that mean? The term Asynchronous in Programming is used for processes that run independently of other processes. In layman's terms, processes running in parallel.

Using this method, the script loads in the background while the HTML is also being parsed, when the script is ready the HTML parsing is paused to execute the script, then the parsing of HTML is resumed. A bit complicated, right?

<html>
    <head>
        <script async src="script.js"/>
    </head>
<html>

This is also not the best option, especially in cases where the script takes a very long time to load. The HTML parsing may be completed while the script is still being loaded and this can cause a performance issue. Multiple scripts are not guaranteed to load in order.

Defer

In this case, the script is fetched asynchronously in the background, while the HTML is being parsed, but is not executed until the HTML is fully parsed.

<html>
    <head>
        <script defer src="script.js"/>
    </head>
<html>

This method is the most preferred since we can be assured that the execution of our script will not fire until the DOM is loaded. There is also an assurance that multiple scripts will load in order.

Conclusion

It is advisable to use the Defer method for loading scripts on web pages. This ensures that functionalities are made available to users promptly, as soon as the page loads.

Thanks for reading this article, your suggestions and comments are welcome in the comment section below. You can also reach out to me on Twitter. Cheers and keep hacking.

JavaScript