On-Demand JavaScript Explained
By
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
srcproperty - 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".
