We all know the historical story of first browser war between Netscape and Microsoft. Microsoft ended it by crushing Netscape into pieces, for the time being. Microsoft controlled over 95% of browser market. Netscape had nothing else to do, but to back off – but they took a shoot on their way back to home : They open sourced their code.

A small group of people, also known as hackers, formed a small foundation called “mozilla” and started hacking. As a result, they released “Firefox” in 2004. That was the beginning of second browser wars. Although Firefox mainly started it, It wasn’t a two player game this time. Apple was the other player. It was not easy to fight from the scratch. So, Apple forked the KHTML rendering engine and create Webkit project and the Safari browser. This war bought the life to many amazing technologies – Web 2.0 has emerged during the war. Yet, the war is not finished yet. Firefox is catching up with the market share with it’s newest release, Firefox 3.0 forming Guinness records.

Upto this point, the war was about new features, and the memory usage of browsers. Then, in September of 2008(yes, this month), Google turned the flow – they released one of their secret projects, Chrome. Like Safari, chrome is also built on Webkit, but Google has rewritten the javascript engine from scratch. This new engine, V8 is several times faster than the current script engines used in other browsers. Eventhough, Google released Chrome first, highlighting V8 and it’s speed, other projects have been also working on their own javascript optimizations. This is the beginning of Browser Wars 2.1.

So, this weekend I did some test runs on those engines. Namely, SpiderMonkey used in Firefox 3.0, TraceMonkey used in Firefox 3.1 and SquirrelFish Extreme used in Webkit. Unfortunately, Google hasn’t released the Chrome for linux yet – so, I wasn’t’ able to run accurate tests on V8 – but I’ve used a VM just to checkout the results anyway.

There are several javascript benchmarking tools available such as Sunspider, Dromaeo, and V8 benchmarks. If you do a little search on the internet, you’ll find tons of sites with benchmarking new engines using those. So, I decided to write few simple javascript functions based on commonly used techniques and benchmark them. These tests are further away from perfect, but it’ll give a rough idea.

Following graphs show how many of times the given function can be executed within one second. Each test has been run for 10 times and the mean is taken – Bigger is better.

Note : V8 tests have been run under a VM, you should technically ignore them.

Dom Create

function dom_create() {
	for ( var i = 0; i < 100; i++) {
		var d = document.createElement('div');
		d.innerHTML = "whatevertest";
	}
}

Dom Append

I wanted to append the ul to document but firefox(both 3 and 3.1) crashed.

function dom_append() {
	for ( var i = 0; i < 100; i++) {
		var x = document.createElement('ul');
		x.appendChild(document.createElement('li'));
	}
}

Update Inner HTML

Note : only function is measured, ‘var garbage = ….’ line is only called once before starting the benchmark.

var garbage = document.getElementById('garbage');

function dom_inner_html() {
	for ( var i = 0; i < 100; i++) {
		garbage.innerHTML = "<div>this should be some large string</div>
<p>with html elements</p><ul><l>>this</li><li>is</li>
<li>a</li><li>list</li> </ul>" + i;
	}
}

Get Element by ID

function get_element() {
	for ( var i = 0; i < 1000; i++) {
		var d = document.getElementById('garbage');
	}
}

Conclusion

(Chrome is not considered in this section, you can give it the benifit of doubt and come to your own conclusions)

As you can see, SquirrelFish Extreme has got an extreme boost over almost everything, except innerHTML updates. Tracemonkey wins the innerHTML updates from unbelievable margin. Both dom based techniques and innerHTML updates are used heavily in ajax based applications. For the time beign, SquirrelFish Extreme seems to have won the overall speed race.

However, browser is not just javascript and rendering. One of the strong features of Firefox is it’s huge number of extensions and the XUL interface which makes the life easier for extension developers. When you combine that with the current market share of Firefox, Firefox will rule the web for next few years.

Script

You can get the html file I used to benchmark from here. The benchmarking functions are taken from John Resig’s benchmarking quality blog post.

Tags: browsers, Javascript, v8, Web 2.0, webkit