Browse DevX
Sign up for e-mail newsletters from DevX


A Server-Side Assist for Loading Client-Side JavaScript Code : Page 3

JavaScript lacks a function for loading and executing a library file while it's executing a main program file. Implementing an include directive on the server side is a simple technique for getting around this limitation.


Implement include() on the Server Side

After wrestling with these problems for a long time, I found a solution that took care of them completely. It also had the added benefit of making the loading process much faster. The answer was to implement include() on the server side. It's important to realize that this is not the same thing as server-side include (SSI), which is a way of allowing .shtml files to include other .shtml files. I'm talking about implementing include on the server side for code that is activated on the client side.

For demonstration, take the following example. Although it is stripped down to the bare essentials, it illustrates the problems you would have when loading a large program.

Suppose you have one Web page called page.html:

<center> <h1> JavaScript Include </h2> </center>

<script src="main.js"></script>

This page loads the main JavaScript file of your JavaScript application: "main.js" loads the library script "mylibrary.js" and then calls main(), which in turn tries to use the library as follows:

// main.js

// This doesn't always work.
document.write( "<script src=\"mylibrary.js\"></script>" );

function main()
  alert( "Here's main!" );



I structured the program this way because it reminds me of the familiar structure I have used in other languages. Unfortunately, it doesn't work. By the time you want to use the code in "mylibrary.js", it still hasn't loaded.

Server-Side include
So, let's change gears and implement the include on the server side. Here's how it works:
  1. Instead of loading the URL (http://myserver.com/page.html), you use a CGI script (http://myserver.com/jsload.cgi?file=main.js).
  2. The jsload.cgi script takes a single CGI parameter, which names a JavaScript file to load—in this case, "main.js".
  3. The jsload.cgi script reads main.js from the filesystem.
  4. The jsload.cgi script scans main.js for include("somefile").
  5. The jsload.cgi script replaces include("somefile") with the contents of the file (taking care not to get into an infinite loop in the case of mutually recursive includes).
  6. The jsload.cgi script sends the code to the browser.

This technique is primitive, but it works nicely and it's quite fast. The speed probably comes from the fact that it creates only one connection. Using the traditional script-tag method may create a new connection for each script.

I ran informal performance tests with the browser and Web server on the same machine, and the results were impressive. My technique sped up the loading of 40 files (about 36k total in size) by a factor of 10.

Thanks for your registration, follow us on our social networks to keep up-to-date