« Some website testing linksWhere to put the locks »

Ajax differences between IE and Firefox

02/28/05

Permalink 03:58:54 pm, by fumanchu Email , 750 words   English (US)
Categories: IT

Ajax differences between IE and Firefox

It had to happen sooner or later: I've been singing the praises of Firefox for quite a while now, and eventually I had to come across something that Internet Explorer does "better". [Update: it doesn't really, if you tweak Firefox. See last paragraph.]

That "something" is an asynchronous XMLHttpRequest, which is all the rage lately. Jesse James Garrett calls it "Ajax", which is as good a name as any, and one that I think will stick. I had the idea to try writing a webpage that would use async javascript + XML to stress-test a website, using only a browser. The initial prototype for that page follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 %s//EN"
    "http://www.w3.org/TR/xhtml1/DTD/%s.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Frontload Stress Tester</title>
<style type='text/css'>

.graphpt {
    position: absolute;
    left: 0px;
    top: 125px;
    width: 1px;
    height: 0px;
    background-color: red;
}

</style>

<script type='text/javascript'>

if (typeof(XMLHttpRequest) != "undefined") {
    http = function() {return new XMLHttpRequest();}
} else {
    try {
        new ActiveXObject("Msxml2.XMLHTTP");
        http = function() {return new ActiveXObject("Msxml2.XMLHTTP");}
    } catch (e) {
        try {
            new ActiveXObject("Microsoft.XMLHTTP");
            http = function() {return new ActiveXObject("Microsoft.XMLHTTP");}
        } catch (E) {
            alert("Your browser doesn't support XMLHttpRequests");
        }
    }
}

totaltime = 0;
semaphore = 0;
loadlimit = 0;
url = "";

function makerequest() {
    var h = http();
    var start = new Date();
    starttime = start.getTime();
    h.onreadystatechange = function() {
        if (h.readyState == 4) {
            var response = h.responseText;
            var d = new Date();
            thistime = d.getTime() - starttime;
            document.getElementById('each').value = thistime;
            document.getElementById('eachbar').style.width = thistime + 'px';
            
            // Move one of the graph points onto the graph
            point = document.getElementById(semaphore);
            point.style.left = semaphore + 'px';
            point.style.height = thistime + 'px';
            
            semaphore += 1;
            totaltime += thistime;
            document.getElementById('avg').value = (totaltime / semaphore);
            document.getElementById('avgbar').style.width = (totaltime / semaphore) + 'px';
            if (semaphore < loadlimit) makerequest();
        }
    }
    h.open("GET", url, true);
    h.send(null);
}

function stresstest() {
    totaltime = 0;
    semaphore = 0;
    url = document.getElementById('url').value;
    loadlimit = parseInt(document.getElementById('load').value);
    for (i=0; i < loadlimit; i++) {
        point = document.createElement("div");
        point.className = "graphpt";
        point.id = i;
        document.body.appendChild(point);
    }
    makerequest();
}

// -->
</script>
</head>

<body>
Load: <input type='text' id='load' value='10' size='4' />
URL: <input type='text' id='url' value='http://localhost/mcontrol/index.htm' size='44' />
<a href='javascript:void(stresstest())'>GO</a>
<br />
Each (ms): <input type='text' id='each' value='' size='6' />
<div id='eachbar' style='background-color: #66FF66; border=2px solid black; width: 100px;'>Each</div>
Average (ms): <input type='text' id='avg' value='' size='6' />
<div id='avgbar' style='background-color: #8888FF; border=2px solid black; width: 100px;'>Average</div>
</body>
</html>

If you don't care to wade through that, it requests a URL n times. You get to tell it n and which URL. The idea was that, although Javascript doesn't do true threading, it at least allows asynchronous processing. I thought it might be possible to make multiple HTTP requests, and have the callbacks processed asynchronously (which doesn't work, by the way, even with setTimeout). I would then time each request (placing the start time in the callback closure), and dynamically show the times on-screen.

It turns out that IE and Firefox time quite differently. For most IIS pages, IE takes 10 or 20 milliseconds to fetch a minimal page, while Firefox takes 40 to 60 ms fetching the same page. With larger pages, the difference continues to be about 40ms per page. I can only assume at this point that the difference lies in the external objects used to make the requests: my IE uses the Msxml2.XMLHTTP ActiveX object, while Firefox uses the XMLHttpRequest builtin. Now the interesting part is that the gap between Firefox and IE narrows when I serve the same pages via Apache2 on Windows, instead of using IIS. IE takes an average of 7ms for the minimal page, and Firefox takes 16ms. For another, larger page, IE takes an average 227ms, while Firefox takes 233 (a difference of about 6ms, not the 40ms we had previously).

Hmmm. More tests to come...

Update: Okay, after making the pipelining tweaks described here, Firefox gets down to a more reasonable 20ms per minimal page on IIS; the Apache speeds are unchanged. Somebody should make those tweaks the default, given the buzz around Ajax these days.

No feedback yet

Leave a comment


Your email address will not be revealed on this site.

Your URL will be displayed.

Please enter the phrase "I am a real human." in the textbox above.
(Line breaks become <br />)
(Name, email & website)
(Allow users to contact you through a message form (your email will not be revealed.)
December 2014
Sun Mon Tue Wed Thu Fri Sat
 << <   > >>
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

Search

The requested Blog doesn't exist any more!

XML Feeds

powered by b2evolution