On-Demand JavaScript Explained | WebReference

On-Demand JavaScript Explained

By Rob Gravelle


There is a programming pattern known as Lazy Loading in which initialization of one or more objects is deferred until the point at which it is needed. Lazy Loading offers many advantages over Front Loading, such as faster loading times, potential saving of bandwidth, and sparing memory. The Java programming language's class loading mechanism is a prime example of Lazy Loading at its finest. As JavaScript Frameworks and user JS libraries become increasingly commonplace, download times can become a real turn off to users. As discussed in part 7 of the auto-complete control series, there are times where dynamically loading scripts and other resources serve an essential purpose. One can make the point that faster loading is not crucial in this age of fast Internet connections, but it can still make the difference between someone visiting your website or your competitor's! In this overview of on-demand JavaScipt, we'll go over the basics of how it's done, as well as look at some tools that allow you to take advantage of On-Demand JavaScript right away.

Traditional vs. Dynamic JavaScript Loading

Common practice for including JavaScript files in a page is to include them within <SCRIPT> tags. Local scripts are contained within the <SCRIPT> tags, whereas external files are referenced via the src attribute:

Using the above methods, any code contained within the <SCRIPT> tags can be referenced by subsequent scripts. JS calls that are placed in the page's onload event only execute once the page has completed loading, so they can be placed anywhere in the page - even before the referenced script(s):

Substituting the On-Demand JavaScript pattern for the ones described above requires replacing all of the script references within the page with one script that performs both initialization routines and subsequent loading of JavaScript code:

Requesting Code from the Sever

There are several ways of obtaining JavaScript code from the server, including:

  • using XMLHttpRequest Calls
  • setting a script's src property
  • dynamically creating the <script> element
  • writing a script element using document.write()

Using XMLHttpRequest Calls

Ajax is the perfect vehicle for loading code modules, functions, classes, as well as adding to existing objects. The following function retrieves a single JavaScript function using a previously instantiated XMLHttpRequest object. The anonymous callback function uses eval() to create a local function variable, which is added to the passed object or the existing context if none is supplied. Finally, it calls the passed function, which will now be able to utilize the downloaded code:

The above code works because the compiler does not check for the existence of the unescapeHTML() function until it attempts to execute it. By calling unescapeHTML() in the callback function, we can be certain that it has completed loading. As shown in the final line of the example, calling the new function immediately after loading may or may not work, due to the asynchronous nature of Ajax. If the downloading is fairly quick, you can use synchronous Ajax calls by passing false to the open() function. There are also tools out there that enable blocking capabilities for asynchronous calls. One such tool is called "Narrative JavaScript".