After doing some research on the subject I found this website where they show three different approaches to load javascript files. I did some testing and here are some results. The three methods to load the javascript tested were:

Inserting a script tag with a src into the head of the document:

Inserting a script tag with code fetched using ajax into the head of the document:

Using eval to execute the code fetched using ajax:

The test code was the following:

This files were loaded using a local Apache server. The results were the following:

Firefox 3.1 Beta 2 on Mac

loadScriptTag
Before
After

loadScriptTagWithAjax
Before
Test loadScriptTag
Test loadScriptTagWithAjax
After

loadScriptAjax
Before
Test loadScriptAjax
After

It seems that firefox executes the script with src just before the script with text everytime. Any way it is asynchronous.

Safari 3.2 on Mac

loadScriptTag
Before
After

loadScriptTagWithAjax
Before
Test loadScriptTag
Test loadScriptTagWithAjax
After

loadScriptAjax
Before
Test loadScriptAjax
After

Safari works just like firefox.

Opera 10 Alpha on Mac

loadScriptTag
Before
After

loadScriptTagWithAjax
Before
After

loadScriptAjax
Before
Test loadScriptAjax
After
Test loadScriptTag
Test loadScriptTagWithAjax

Opera executes the script tags when all the code is done running.

IE 6.0 on Mac using ies4osx

loadScriptTag
Before
After

loadScriptTagWithAjax
Before
Test loadScriptTagWithAjax
After

loadScriptAjax
Before
Test loadScriptAjax
After
Test loadScriptTag

IE executes the script tag with src at the end but the script tag with content in the right place.

Overall the only common result is using ajax with eval. This is my choice for modularjs.

Grab here the sources for these tests

No related posts.

Most javascripts frameworks use different approaches to this. Some use an offline builder to create a single javascript file they distribute. Some other use a online dependency loading through different methods and some others a combination of both. Here’s a small list of frameworks and what they do:

YUI Loader Utility

If you plan to use the YUI Loader Utility, it means that you’ll have to add it to your page, in other words 9.4kb more, not too bad. You can load any javascript file. It also supports rolled up files, this means that you can have all the source files “rolled up” on one file and the loader works exactly the same way as if you were using separate files. This is an online only loader. It looks like this:

For custom modules it looks like this:

Dojo Toolkit

This choice means that you’ll have to build over dojo and use dojo’s require and provide mechanisms to request and provide modules online. It also has a ant and rhino based build system that can pack offline all modules in one file. The base dojo script takes ~100kb compressed which is quite large. I’m not really sure if the build system would work without the base dojo.js file. It looks like this:

And the module file, in this case by default at dijit/form/Button.js, should start with:

Prototoype

The Prototype build system uses Rake. This approach has the benefit of having multiple source javascript files and through a build system combine them on a single file. The downside is that you cannot choose at runtime which modules to load or not making it a all-or-nothing package. Also while developing you’ll need a ruby server to be able to test your code without compiling it. The code you need looks like this:

Note that it is not javascript but ruby code.

Mochikit

The Mochikit build system is based on python and rhino. It’s an offline packer and for development you’ll have to add all the scripts you are developing and dependencies on the right order. It has some sort of validation of import like this:

In the next article I’ll write about the internal methods used to load javascript files online, their advantages and disadvantages as well as my own way of doing it.

No related posts.