Loading a Javascript File

Different Strategies: Asynchronous and Deferred Javascript

Async and defer are two amazing modern attributes of the script tag, to load javascript, often confused with one another and relatively left un-exercised.

Basically, the normal loading and parsing of an html file is interrupted when a script tag is encountered. The flow in HTML parsing is stopped until the responsible script tag is done being fetched from the server and is executed.

Let us first take a look at some javascript loading practices.

Strategically placing the script tag

At a primary level, script tags can be loaded at the head or body section of a document. When placed on the head, if the script tag depends on any element of the DOM that hasn’t been loaded yet, it can raise an undesired result. This can be encountered by loading the script tag at the bottom of the body section of the HTML or wrapping the javascript code by an event listener.

No additional downloading happens until a script tag of the document if fully downloaded and executed.

Lazy Loading Javascript

Lazy loading is another technique in which a small single javascript file is loaded alongside the HTML document, and all other remaining javascript files are loaded in the background after the first js file finishes loading. This makes for a very quick initial load and improved user experience as they dont have to wait until all js files finishes loading as they can interact with the webpage as the other files are being loaded. E.g.:

1
2
3
4
5
6
7
8
  document.addEventListener('DOMContentLoaded', function(e) {
    let head = document.querySelector('head');
    let jsLoad = function(src) {
        let link = document.createElement('script');
        link.src = src;
        head.appendChild(link)
    }
   })

Async and Defer changes the default way the script tag is laoded and executed. They’re important when the script tags aren’t located at the end of the document. Let’s take a dive into them.

Normal JS Execution

Asynchronous JS

When an external script has the async attribute, the file can be downloaded while the html document is still downloading assets and is being parsed. This will continue until the file is finished downloading upon which the html parser is stopped and the downloaded script is executed. This is useful when the script tag that is being loaded doesn’t depend on the html elements or other scripts that are simultaneously being loaded and parsed. It is also a bad idea to load the script file using async if subsequent script files depend on this script file. Async doesn’t guarantee the order of execution of the script.

Deferred JS

Defer is close to async in the fact that the script files are downloaded as the HTML is being parsed just like async. But the differentiating factor is that the script tags loaded with defer attribute set to true are executed when the HTML parser finishes parsing the HTML files. Defer code is executed before the ready event of the document is run. For reference, while using Jquery’s Datatable, the script to be included is usually set with defer attribute as it depends on execution of jquery and jquery ui’s script files first. Hence, in the following order, jquery jquery ui datable (defer) Defer ensures that the script that relies of two other files is executed at the end.

Conclusion

Thus, async and defer’s usage depends on some questions about the script:

• if the script is self-contained and doesn’t depend on other scripts
• location of the script tag, if it is in the head or body section
• if the script depends on other script or is depended on by other files

Async attribute does't always guarantee the order of execution of the scripts, whereas, deferred javascript is always run after the html parsing is done and before the document is ready and is hence, more reliable. Async can be used for small javascript files that really don’t depend on any other scipt files and when their execution order doesn’t matter.

Exercising these features can improve load times as well as ensure smooth execution of our html and javascript elements.