Friday, June 25, 2010

I'm a believer - Chrome + JavaScript = fast

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:
IE

Firefox:
IE

IE 9 Preview:
IE

IE 8:
IE

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

No comments:

Post a Comment