13
Jan
Loading javascript: <script> vs. ajax vs. both
stored in: modularjs and tagged: , ,

On my previous post I looked at how some frameworks handle the multimodule approach to separate javascript code. Since then I’ve been playing with different ways of loading scripts online vs. doing it offline.

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:

var loadScriptTag = function(src) {
    var head = document.getElementsByTagName("head")[0];        
    var script = new Element("script", { type: "text/javascript" });
    script.src = src;
    head.appendChild(script);
};

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

var loadScriptTagWithAjax = function(src) {
    var response = new Ajax.Request(src, {
        method: "get",
        evalJS: false,
        asynchronous: false
    });

    var head = document.getElementsByTagName("head")[0];        
    var script = new Element("script", { type: "text/javascript" });
    script.text = response.transport.responseText;
    head.appendChild(script);
};

Using eval to execute the code fetched using ajax:

var loadScriptAjax = function(src) {
    var response = new Ajax.Request(src, {
        method: "get",
        evalJS: false,
        asynchronous: false
    });
    eval(response.transport.responseText);
};

The test code was the following:

var log = function(m) {
    new Insertion.Bottom(document.body, m + "<br />");
};
           
log("<h1>loadScriptTag</h1>");
log("Before");
loadScriptTag("test-tag.js");
log("After");

log("<h1>loadScriptTagWithAjax</h1>");
log("Before");
loadScriptTagWithAjax("test-tag-with-ajax.js");
log("After");

log("<h1>loadScriptAjax</h1>");
log("Before");
loadScriptAjax("test-ajax.js");
log("After");

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.

No Comments

Leave a Reply