Update 7/6/2010: I re-ran all the tests on a Windows 7 machine in order to include the IE9 Preview, which I can't install on Windows XP. The results were consistent with my previous tests - Chrome wins.

In working on an API with a requirement to process a large amount of data (> 5MB) client-side in a browser, I needed to find a way to make JavaScript behave in a thread-like manner. I came across the setTimeout() function, and the following pattern from Julien Lecomte's excellent blog.

This pattern effectively allows you to execute long-running processes without locking up your browser and making it unresponsive.

It worked as expected, but it seemed slow running under Firefox. I was developing on a VM of Ubuntu, so I'm sure that had something to do with it. However, I kept tweaking parameters and optimizing my code to see if I could get a bit more response from the pattern. I did, but it was marginal. I was processing 5MB of data client-side in around 1.7 minutes under VM, so I reasoned it would probably be faster in real life.

Then, I decided to try Chrome. I was completely stunned. It ran in about 15 seconds. I tested more, but the results were consistent. I also have Opera installed, so I started it up, and the results were even worse than Mozilla. In fact, I got tired of waiting for it to finish, so I just killed it.

But now I was curious why it was happening. Was it the pattern itself, or was the process my code was running simply taking longer in the other browsers? I know Chrome's V8 is supposed to be faster, but I wonder why it's so noticeable on this particular pattern.

I decided to try a different test. I borrowed Julien's example code from the above post and saved it to a Windows XP workstation with IE, Firefox, and Chrome installed. I set the length of Julien's array to be sorted to length = 5000; so it would take longer in all browsers. Then I launched the page and let it sort. Chrome, again, is the clear winner. Here are the results, from fastest to slowest:

Chrome:


Firefox:


IE 9 Preview:


IE 8:


I ran each browser a couple of times just to be sure the results were consistent. (Hardly rigorous testing, I know, but enough to satisfy me.)

So I've heard that Chrome has the fastest JavaScript engine, but now I've actually experienced it for myself. However, I'm left to wonder why it's so apparent in this code? My guess is the way in which the 'continuation' of the anonymous function is implemented in the various engines. Perhaps somebody with a deeper knowledge of the internals knows better?

Update

It turns out, somebody did know better. I asked on the Chrome forums, and Erik Kay, one of the Chrome hackers, indicated that the speed increase is most likely due to Chrome's timer implementation. Here's his response:

http://groups.google.com/group/v8-users/browse_thread/thread/efb5fcc1c94aafa6

He pointed me to the following blog post that gives a detailed account of how the Chrome team developed the timer system, and why it's so fast. It's totally worth the read:

http://www.belshe.com/2010/06/04/chrome-cranking-up-the-clock/

One more thing. There's also this page, which tests the frequency of the timer implementation in your browser:

http://www.belshe.com/test/timers.html

A friend of mine sent me the Steve Jobs open letter to Adobe concerning Flash. I replied to him via email, but I thought it might be good fodder for the blog, which is desperately in need of some love. Here's my response to him, without edits:

I recently wanted to do one of those nice trendy popups that stay within the current web page and fades everything behind the pop-up. I wanted to use it to allow a user to view a demo, a Flash animation. Pretty typical usage from what I've seen.

I figured this was something done handily by jQuery, but I had some trouble finding a minimal, complete source to start with. Everyone seemed to want to force you to go through the tutorial they wrote, step by step. Well, I usually want the code, and then the tutorial.

I found this tutorial which was at least succinct. Soon I had a very small (i.e. minimal), working .html document that behaved how I wanted. For instance, it automatically figures out the horizontal and vertical positioning of the pop-up so it comes up in the center of the screen.

Here you go:

<html> 
    <head> 
        <title></title> 
<style> 
#popup {
height: 100%;
width: 100%;
background-color: #000000;
position: absolute;
top: 0;
}
 
#window {
width: 500px;
height: 400px;
margin: 0 auto;
border: 1px solid #000000;
background: #ffffff;
position: absolute;
top: 10%;
left: 15%;
}
</style> 
 
 
<script type="text/javascript" 
src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
 
 
<script type="text/javascript"> 

function Show_Popup(action, userid) {

var hpos = ($(window).height()/2) - (400/2);
var wpos = ($(window).width()/2) - (500/2);
$('#popup').css('opacity',0.75).fadeIn('fast');
$('#window').css('top', hpos + 'px').css('left', wpos + "px").fadeIn('fast');
// I added a function call here to insert my demo into the #window div
}

function Close_Popup() {
$('#popup').fadeOut('fast');
$('#window').fadeOut('fast');
}
</script> 
 
 
    </head> 
    <body> 
 
        <div onclick="Show_Popup()" 
         style="text-decoration:underline">
          View demo
        </div> 
 
 
 
 
<div id="popup" style="display: none;"></div> 
<div id="window" style="display: none;"> 
<div id="popup_content">
<a href="#" onclick="Close_Popup();" >Close</a>
</div> 
</div> 
 
 
    </body> 
</html> 

And now for the tutorial, also minimal:

(1) Make sure that the <div id="popup" ... </div> section is placed into your page just prior to the </body> tag.

(2) It's unlikely that your popup height and width will be the same as mine. You'll need to modify in two places to change this - inelegant I know - in the #window style declaration, and in the Show_Popup() function, where hpos and wpos are calculated.

Here's the demo page.