Comparing Browser JavaScript Performance 134
Thwomp writes "Over at Coding Horror Jeff Atwood has an interesting writeup on JavaScript performance in the big four browsers. He used WebKit's newly announced SunSpider to produce the results. If a probable anomaly in the IE7 results is overlooked, Firefox 2 is the slowest of the bunch. Atwood has also benchmarked the latest Firefox Beta, and its performance seems to be improved significantly."
A grain of salt (Score:5, Interesting)
Re:A grain of salt (Score:4, Insightful)
Re: (Score:3, Insightful)
I'd like to see those results.
Re: (Score:2)
Re:A grain of salt (Score:5, Insightful)
I guess there's value in such a benchmark, but it goes against the conventional wisdom of Amdahl's Law. If JS execution accounts for only 10% of the runtime of your application, it will be of little value to make JS 20% faster. You must concentrate on the other 90%.
Re: (Score:2)
Re: (Score:3, Insightful)
Re: (Score:2)
As you say, when it comes to speed, especially with something li
Re: (Score:2)
Re: (Score:2)
Lets assume for a moment the IE7 string result is a bug in the test rather than an IE7 itself. Nonetheless, this, along with property access, is bound to be a lot more important than 3D related operations for typical applications.
For that matter, the most important factor for Ajax applications would intuitively be marshaling and searching th
Hmmm (Score:5, Funny)
Like what? It didn't crash the system or it actually launched
Re:Hmmm (Score:5, Interesting)
Re: (Score:3, Insightful)
There could be a good reason for the test showing poor performance - say IE is shit at string concatenation - and then the result reflects badly on IE. Or, it could be that for whatever reason the benchmark hits som
Re: (Score:3, Interesting)
If that's true, (and I figure someone will calibrate me if I'm wrong) that could explain an apparent performance anomaly, if the browser farms out the string manipulations to another process.
Re: (Score:2)
Its still the same thread.
More than likely is that they were using math operations which were already optimized and wrote their own string functions and then 'forgot' to optimize them.
The actual problem... (Score:5, Informative)
When you concatenate 2 strings in JScript, it determines the size of the buffer needed, allocates the buffer, does the concatenation, and returns the result to the caller.
Which works fine, until you start putting some load on those old tires...
x = 'some';
y = 'string';
z = 'here';
testString = x + " " + y + " " + z;
(Ignore that nobody would actually write code JUST LIKE THAT, they would just add a trailing or leading space to the x, y & z strings. But concatenating a result with some white space is not abnormal.)
Now, just think about what this is actually doing under the hood..
1. determine len of x (4) plus len of " " (1) = 5
2. Allocate new buffer(5)
3. Concatenate, assign result to temp
4. determine len of temp (5) plus len of y (6) = 11
5. Allocate new buffer(11)
6. Concatenate, assign results to new temp, destroy old temp
7. determine len of temp (11) plus len of " " (1) = 12
6. Allocate new buffer(12)
8. Concatenate, assign results to new temp, destroy old temp
9. determine len of temp (12) plus len of z (4) = 16
10. Allocate new buffer (16)
11. Concatenate, assign results to testString
So, to concatenate relatively little string data, 3 temporary buffers were needed and 4 separate allocations were done.
It works fine, right up to the point where it doesn't
Re: (Score:2)
2
6
7
6
8
11
In other news, somebody has appeared to do some overloading on my internal increment-operator
Re: (Score:2)
Re: (Score:2)
http://blogs.msdn.com/jscript/archive/2007/10/17/performance-issues-with-string-concatenation-in-jscript.aspx [msdn.com]
Re: (Score:2)
It was just as easy to explain it as it would've been to search for the blog entry.
Thanks for digging it up.
Re:Hmmm (Score:4, Interesting)
4.5 HTML file, mainly consisting of one very large table. Took about 1 minute to render in IE, using about 80MB RAM. Was asked to lay it out in a more useful way. I went the fairly simple route - once it was fully loaded, I used JavaScript to lay it out better.
Original attempt was to just use innerHTML and string operations (couldn't remember the DOM commands, too lazy to look them up). The main bit was a single substring() on the div containing the large table (actually stripped off everything around the table).
The time to render the page jumped to 10 minutes! Memory use jumped sharply as well (largely because I was duplicating the table
For comparison, Safari 3 on Windows rendered the entire page in 5 seconds, whether I used innerHTML and substring() (including the duplication mentioned above) or DOM manipulation. Safari used a bit more memory than IE though (worst case 215MB compared to 200MB).
Re: (Score:2)
Re: (Score:2, Insightful)
Re:Hmmm (Score:5, Informative)
Fortunately, there are workarounds. The easiest is put all the component strings you wish to add together into an array and then call join('') on the array to build the result string. This executes much, much faster in IE and should be fast in the other browsers as well. Before I figured out the join('') "trick", I implemented a scheme to add the component strings in a much more optimal order...the N^2 cost is only if you add them in a naive, left-to-right manner. By pairing up adjacent components and adding, you get N/2 intermediate results. Repeating the pairing process on these intermediates, and over again until you have your 1 final result, the allocation cost is only N*Log(N), which is far FAR better than N*N. Incidentally, this is similar to the "Russian Peasant Algorithm" technique used to optimize the addition of N numbers on massively parallel processors...whereby you can reduce the cost of N additions from N to Log(N) time assuming there are enough processors (N/2) on hand. When I learned about the join(), I compared its performance to the Russian Peasant technique and got very comparable results in IE. Weired, since if join() were using a StringBuffer under the hood (like it should), then its performance should be O(N), not N*Log(N)...
Anyways, in summary - yeah it sucks hard that IE does that, but it's easy to workaround once you know what's up (gee, that's true in so many cases with IE quirks).
Re:Hmmm (Score:5, Insightful)
To paraphrase: "What surprised me here is that Firefox is substantially slower than IE, once you manipulate the experimental data by removing something that IE is particularly slow at."
And guess what? If you remove string ops, bit ops, and date ops, then Firefox is probably faster than IE.
Re:Hmmm (Score:5, Informative)
IE's string concatenation is ridiculously slow. I've found that in all browsers (except Firefox) it's faster to use an Array, push() together the string elements, and finally join('') them together to create the final string.
In Firefox, this is ever-so-slightly slower. In Internet Explorer, it's a good order of magnitude faster. (Depending on the length of the string. Concatenating a string 100 chars long together 10,000 times, I got a time of 13.7 seconds for plain old string concatenation ("string" + "string") versus .04 seconds for Array.push(). Firefox did the same test in .7 seconds using both methods.)
The SunSpider tests appear to be using plain-old string concatenation. I'll have to try rewriting them using Array.push() and see what the result is. Doing that IE's performance would almost certainly beat Firefox.
It's Flash (Score:5, Interesting)
I think Flash is the biggest DoS in the history of the web and Adobe really needs to take a good look at it. With all of these Flash ads and Flash-based video players, it really is a critical issue. Using adblock is an absolute must in my book, just to keep the browser running. My bet is some sort of resource leakage, since it happens over time -- like when watching several YouTube videos. It doesn't crash on the first or second one, but you're courting disaster on the third and above.
By the way, is there any way for FF to handle plugin crashes gracefully, i.e. *without* bringing down the browser with it? Maybe running it in a separate process somehow and just putting up a "broken image" sort of placeholder?
Re:It's Flash (Score:4, Funny)
If by fine you mean freaking bloody slow.
Flash designers wouldnt know speed if it slapped them with a large trout.
YouTube is good. It can handle a video pretty well (occasional frame dropping).
Ads and many other things will reduce the computer to a crawl instantly.
Re: (Score:2)
No, no, No! Wrong solution.
You are not giving websites any incentive to drop Flash ads.
Far better to use just Flashblock to block only Flash ads to text and plain image ads get more impressions. If all Adblock users switched to Flashblock websites would soon get the message. As it is, I expect to see more non-conventional formats (mostly annoying) like layer ads, intersit
Ooh ooh let me guess (Score:5, Funny)
Re: (Score:3, Insightful)
Re: (Score:2, Offtopic)
Then whitelist sites you trust through site preferences.
Vista + ie7 took hours! (Score:5, Funny)
Re: (Score:2)
Opera (Score:3, Insightful)
Re: (Score:3, Informative)
There is an error in the aggregating mechanism of the benchmark. Otherwise, it would work in the current Opera as well.
Re: (Score:2)
Opera: 68752.8ms +/- 9.2%
Firefox: 74978.8ms +/- 17.8%
"fasta" seems to be the weak point for Opera.
Re: (Score:3, Funny)
Bah humbug! (Score:5, Informative)
First off IE6 is not tested, while it is still the most used browser. Also Opera 9.5 is not ready, it has so many bugs it just isn't funny anymore. Many sites break that worked fine in Opera 9.2.
But let's get to the good stuff. Yes in pure JavaScript like this, IE might be faster than Firefox. But in real world situations it clearly isn't. There is no test done on layout manipulation (and such) using JavaScript. Internet Explorer is notoriously horrible at this, especially if you use it combination with PNG's with alphachannel or complex CSS. Not to mention if you have to use JavaScript hacks because of IE6's lack of CSS support for the simplest things.
Funny is also how almost all JavaScript library speed tests I've seen put Internet Explorer far behind the others.
In 'real world' JavaScript performance Opera and Safari would be the winners, where I'd choose Safari as absolute winner, as Opera gains a lot of redrawing speed by cutting corners it should not cut which often result in display corruption (ie, the type that goes away when you force a redraw by minimizing and then maximizing the window again, or moving another window over Opera and then away again). Quite a bit behind in speed after Safari and Opera would be Firefox, followed even further back by Internet Explorer.
As a developer I still prefer Firefox for development though. Webkit is awesome, but the Safari GUI just plain sucks. Opera... hmm, I like it on my mobile devices, but it's just too weird for the desktop (what, textarea's don't even support scrolltop? wth!)
Re: (Score:2)
In 'real world' JavaScript performance Opera and Safari would be the winners, where I'd choose Safari as absolute winner, as Opera gains a lot of redrawing speed by cutting corners it should not cut which often result in display corruption (ie, the type that goes away when you force a redraw by minimizing and then maximizing the window again, or moving another window over Opera and then away again). Quite a bit behind in speed after Safari and Opera would be Firefox, followed even further back by Internet Explorer.
I was wondering about that, a lot of the things that were listed as being a part of the benchmark aren't thing which I've ever used.
It looks to me like the benchmark was put together in a way that favors obscure optimizations over genuine real world use. 3d isn't something that I run into a whole lot on the web.
This looks less like performance issues and more like decisions made on the part of the developers as to what is more important than what.
Personally I'd be more focused on things like the regexes, s
Re: (Score:2)
The only thing which wasnt tested is DOM. Presumably because the benchmark is for raw speed.
Everything else is used to varying extents. Go check off how many of them are used in something like GMail.
Re: (Score:1)
Re:Bah humbug! (Score:5, Insightful)
Re: (Score:2)
Specifically drag drop stuff. Firefox stutters a little and Konqueror is very smooth.
Keep in mind that this is on a old P4 but still it highlights a difference.
Re: (Score:2)
GUCCI [gucci.com]
even works in IE6... which is REALLY impressive
Re: (Score:2)
Nonsense. Opera does not cut corners. The problems you are describing are normal bugs, not intentional, and do not make Opera faster (or slower). Please stop spreadig FUD about Opera just because it's much faster than Firefox.
Re: (Score:2)
This hasn't been my experience. To test if I'm just misremembering, I googled up a few JS benchmarks and ran them on FF 2.0.11 and IE6 w/ latest patches, then Opera 9.25 and Safari 3 Beta for comparison. XP Pro 32-bit on a 2.4ghz P4 Northwood:
http://www.computerbytesman.com/js/jsbench/dobench.htm?
FF: 2078ms, IE: 1313ms, Opera: 875ms, Safari: NaN (some tests failed)
http://www.rahul.net/rhn/
Some more data ... (Score:3, Informative)
AMD Athlon 64 3200+, 1GB, Ubuntu 7.04, using FF for 4 hours, listening to last.fm.
CC.
Re: (Score:1)
Firefox through Wine (Score:3, Interesting)
Wine results [webkit.org]. Native results [webkit.org].
Re: (Score:2)
Re: (Score:1)
About what I get if I clean up and exclusively run the benchmark. But that is not a 'live' situation.
Anyway, this tells me that I do not need a new machine for what I do.
CC.
Re: (Score:2)
Re: (Score:2)
client side javascript will become our enemy (Score:3, Insightful)
My basic rule of thumb has also been that client scripting should enhance and application but not be required for the application. In other words with JavaScript disabled the application might act rudimentary but will still produce results.
Re:client side javascript will become our enemy (Score:4, Informative)
Compare it to the days of IE5.5 vs Netscape 6 (the worst browser ever released) vs Netscape 4.7 and you can see what huge progress has been made.
Re: (Score:3, Informative)
I can second this statement. With libraries like prototype, and others that build on top of it, cross-browser development is simplified. The libraries take care of many of the differences between browsers, leaving the developer to work on the actual features.
Re:client side javascript will become our enemy (Score:4, Insightful)
Re: (Score:2)
Re: (Score:1)
For the project I am currently assigned to, I use jQuery for full-fledged AJAX, lots of client-side logic and a lot of DOM manipulation - pretty much as heavy as it gets with JavaScript, in short. I've also really used Dojo and gave Prototype, Mootools and ExtJS a short spin and prefer jQuery over any of them.
Note that even though I bash disabling JavaScript here, these projects I work
Re: (Score:3, Insightful)
Really, what's next, catering to people who don't have CSS?
That's exactly why CSS exists... to separate content from layout/display characteristics. You can make an entirely graphical-button image-chopped page with all kinds of rollover goodness, and as long as you write your (x)html and CSS properly, it will break down fine in a text or mobile browser. Using techniques like image replacement is critical if you want your flashy website to be accessible to people using screen-readers or mobile browsers.
This of course assumes that your site has some kind of co
Re: (Score:1)
Re: (Score:2)
Re: (Score:2)
Re: (Score:1)
Re: (Score:1)
I'm sure there's someone out there still using Mosaic. Should we throw out CSS too?
Re: (Score:2)
Same test for OSX, please? (Score:2)
Re: (Score:1)
Re: (Score:1)
Total: 7171.4ms +/- 0.4%
http://webkit.org/perf/sunspider-0.9/sunspider-results.html?%7B%223d-cube%22:%5B358,351,350,355,353%5D,%223d-morph%22:%5B573,574,574,567,575%5D,%223d-raytrace%22:%5B253,252,249,251,251%5D,%22access-binary-trees%22:%5B124,117,121,121,122%5D,%22access-fannkuch%22:%5B371,372,377,375,377%5D,%22access-nbody%22:%5B354,348,352,353,351%5D,%22access-nsieve%22:%5B162,160,168,158,157%5D,%22bitops-3bit-bits-in-byte%22:%5B160,1 [webkit.org]
Re: (Score:1)
Jscript string concatenation sucks (Score:1, Interesting)
The unoptimized spidermonkey cli shell firmly trounced kjs last year when I did my testing, more likely what's being measured by these benchmarks is DOM access.
better idea (Score:2, Insightful)
Re: (Score:2)
lynx beats them all, 17 ms to pass test (Score:3, Funny)
~$ time lynx -dump http://webkit.org/perf/sunspider-0.9/sunspider-driver.html [webkit.org]
SunSpider JavaScript Benchmark (In Progress...)
real 0m0.017s
user 0m0.001s
sys 0m0.004s
~$
Re: (Score:3)
Re: (Score:1)
Now We'll See Performance Improve (Score:2)
The JIT compiler isn't in JavaScript yet. (Score:5, Interesting)
FireFox was supposed to be getting a JIT compiler for JavaScript. [mozilla.org] It's the one from the Flash player, where it runs ActionScript. That's apparently now expected in 2008. Then we'll see some real improvement.
Just a note: it wasn't "supposed" (Score:2, Insightful)
Re: (Score:2)
Konqueror (Score:2)
Re: (Score:2)
I don't have access to the same hardware as Jeff, of course, but I do have both FF2 (2.0.0.8) and Konqueror (3.5.8). Konqueror took more than three times as long to run, on the same hardware. Konqueror 4rc2 was still slower than FF2, but almost exactly twice as fast as Konqueror 3.5.8... which is a pretty significant improvement, at least
It would be cool (Score:2)
SSE Optimization (Score:1)
Good one (Score:3, Insightful)
Had it been "the big one and the one that just edged into relevance", then most people would know what you meant.
Re: (Score:2)
It's just a web browser, get a grip.
And the winner: Linux (Score:5, Informative)
WinXP Firefox 2.0.0.11: 18.8s
WinXP Internet Explorer 7.0.5730.11: 33.1s (same issue with the strings performance)
Ubuntu Firefox 2.0.0.6 (yeah, well): 15.3s
I only have opera running on my WinMobile Dell Axim v51x PDA and it's currently running, it seems to be 30-40 times slower than the desktop, so I'll not be waiting before I post...
Re: (Score:3, Funny)
Okay, it wasn't that bad - it finished in 317.8s. So 15-20 times slower. I was actually surpriced that it managed to run to the end.
Compare JavaScript Frameworks (Score:4, Interesting)
If you run the MooTools Slickspeed tests [mootools.net] in different browsers, you find something interesting:
jQuery also claims to be the most accurate, though who knows for sure.
Re: (Score:2)
Re: (Score:2)
Weird. Maybe it's an OS thing -- I tested Firefox on Mac OS 10.4.11.
You also need to run it several times and average the scores. 197 versus 202 is basically the same score in these tests. 202 versus 518 is a more significant difference.
IE JScript string perf (Score:1, Insightful)
There was an article about IE's string performance in the Jscript team blog on MSDN a while back : http://blogs.msdn.com/jscript/archive/2007/10/17/performance-issues-with-string-concatenation-in-jscript.aspx [msdn.com]
Aaargh! on December 20, 2007 11:34 AM
Firefox 2 vs IE (Score:2)
Now bitops could be important for a browser, but I would not see too many pages doing things with 3D. Date and regexp are important, but they are hardly things you do in a loop on a regular basis. Access, control flow, crypto and strings seem more important to me.
Just adding up the benchmark results was pretty weird imh
What I learned. (Score:2, Insightful)
Slowdown due to add-ons (Score:2)
Re: (Score:2)
still, pretty fast (Score:2)
Vista + IE 7 vs Ubuntu 7.10 + FF 2 (Score:2, Informative)
Here are the links to the full reports:
Windows Results [webkit.org] and Ubuntu Results [webkit.org]
Re: (Score:2)