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.

Note : Before you read this blog post, if you are a web developer/designer and you have never tried firebug, then stop all your work and try that.

As you might already know, the best tool to debug a web frontend is firebug. It’s really easy and efficient. When you get used to it, you can’t actually live without it.

I was working on a web project for several months now, and there was a very strange behavior on that site. Everytime I go there, firebug stops working. That’s very annoying specially when that site is AJAX (and when there are lot of bugs there ).

Today, I found what makes firebug stop. I was using “parent” as a variable name. The site works perfectly with it but firebug didn’t manage to handle that.

I was doing a japanese shopping site and coded a small escape function in javascript which is also works for shift-jis encoding. The native function screws up the encoding. It worked prefectly, and I went on coding. I was doing all the development in firefox and suddendly the login function stopped working in IE(Actually not stopped working, It never worked in IE). The problem was that I used the javascript string as an array of char but in IE, it doesn’t support that. If I want to access a character I have to use the charAt function. When I searched in the Internet, I found that this is so common but just blogged it anyway.

Download jigsaw.js samples.zip
Jigsaw is a small javascript framework for AJAX.

First you need to download the prototype library from http://prototype.conio.net/. Then include the javascripts in your header like this :

<script src="prototype.js" type="text/javascript" language="javascript"></script>
<script src="jigsaw.js" language="javascript" type="text/javascript"></script>

After that you just have to call the request function.

<script>
var request = new Ajax.Request('test.xml');
</script>

It can be either a static xml page or dynamically generated one, it doesn’t matter. The xml file describes what to do next.

Here is a sample xml.

<?xml version="1.0" encoding="iso-8859-1"?>
<response>
<element id="header">World!</element>
<element id="header" attribute="style">font-size:16px</element>
<element id="image1" attribute="src">picture2.jpg</element>
<script>alert('Text inside script tags are executed')</script>
</response>

Your html page should have two elements like this :
<div id="header">Hello</div>
<img id="image1" src="picture1.jpg" />

It’ll update the content of the header div to “World!”, make the font size larger and the change the picture to “picture2.jpg”.

You can also create javascript objects.

<?xml version="1.0" encoding="iso-8859-1"?>
<response>
<object>
<attribute name="name">Person1</attribute>
<attribute name="age">20</attribute>
</object>
<object age="30">
<attribute name="name">Person2</attribute>
</object>
<object name="Person3" age="40" />
</response>

Then you have to create a function to process the objects.

function process_objects(response) {
for (var i=0;i<response.objects.length;i++) {
alert(response.objects[i].name+" = "+response.objects[i].age);
}
}

The request should be like -

var request = new Ajax.Request("objects.php",{onFinish:process_objects});

You can also access the XMLHTTP Object from response.transport

This function is called after the pre-processing, if you want to process something before pre-processing use onComplete option.

After successfully finished an AJAX project (a simple AJAX Content Management System), this time I’m going to create a complete AJAX site. The CMS was created without using any 3rd party frameworks, and had a great time debugging the javascript code. So, this time I decided to use a framework.My choice was Rico – A client side javascript framework. It also provides some javascript animations and drag n drop features – haven’t tried those yet. Actually, this made my work much easier. If I want to update the value of an element, then I just have to create a piece of xml code, the framework parses it and updates the element automatically. But it only supports updating an element value, if I’m doing something outside that, I have to parse the code manually and do it. So, I created my own mini framework using Rico:). Now, it’s really easy.

When I was creating the CMS, the alerts did a great job . It really helped me to debug the javascript code. But this time, Rico blog directed me to a nice extension for firefox – FireBug. It’s really cool. Actually, the main advantage is, it captures all AJAX events. Simple and Useful.