Learn how to load script in HTML

June 27, 2020

You can load the script tag in 4

  • Using script tag
  • Using script tag with defer attribute
  • Using script tag with async attribute
  • Using JavaScript to load script

Consider we have 2 script to load script1.js which is 10kb and script2.js which is 1MB of file size.

Using script tag

You can load script tag anywhere in head and body tag, but it is always recommended to load the script at the end of the body tag, so it doesn't stop the browser from constructing the DOM .

Normal script loading

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <div class="parent">
            <span class="child1">Child</span>
        </div>

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

Why script tag at bottom ?

When the browser loads the HTML , if it find any script tag, it cannot build the DOM below the script until the script is completely executed. If it is an external script the browser stops building the DOM and download the script and executes the script then again resume building the DOM.

Due the above case, the user cannot see the page content until the scripts are completely loaded. Also we cannot add the event listener to the elements below the script because those elements below the script tag are not yet appended to the DOM. So you cannot refer the element and do operations on it.

Example

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <script>
            console.log("hi");
            console.log( document.querySelector(".parent") ); // null
        </script>

        <!-- Below elements are not visible to the above script-->
        <div class="parent">
            <span class="child1">Child</span>
        </div>

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

You may see that document.querySelector(".parent") because the script is executed before build the elements. The above case is similar for adding a external script before the elements .

From the above we can conclude that, we should always load the script tag at the end of the body

Using defer attribute

The defer attribute tells the browser to only execute the script file after HTML document is fully parsed. The file can be downloaded while the HTML is still parsing but executed only after the document is ready but before the DOMContentLoaded event is triggered . The defer attribute is only for external scripts

Defer script loading

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="script1.js" defer></script>
        <script src="script2.js" defer></script>

        <!-- Below elements are visible Before the script loading -->
        <div class="parent">
            <span class="child1">Child</span>
        </div>

    </body>
</html>

If you have a large script first, and then a smaller one, then the latter one waits.

Using async attribute

Setting async attribute to a script tag will be loaded asynchronously, means it is completely independent of DOM. The HTML parser doesn't pause the DOM parsing, the the execution happens whenever the script becomes ready If the async script is loaded before parsing the HTML completely, the parsing is paused and the script is executed and again the HTML parsing is started

If we have multiple async scripts, they may execute in any order, which one loads first will be executed first

async script loading


async script loading

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="script1.js" async></script>
        <script src="script2.js" async></script>

        <!-- Below elements are visible Before the script loading -->
        <div class="parent">
            <span class="child1">Child</span>
        </div>

    </body>
</html>
  • async is mostly used for ads loading and third-party script loading
  • The async and defer scripts doesn’t block page rendering, so the user can see page.

Using JavaScript- Dynamic script loading

You can dynamically create a script element in JavaScript and append to the body. Dynamic scripts is async by default

let script = document.createElement('script');
script.src = "/script1.js";
document.body.append(script);