In this series of articles I will try to provide some guidelines, tips and tricks about JavaScript performance.The first article will handle string concatenation, methods and performance guidelines which will make your JavaScript code better, allow it to run faster and provide smoother user experience.



The problem

Most JavaScript developers use the easy String manipulation possibilities which JavaScript offers, that is combining string with the + operator.

var str = "Hello" + " World";



While this is very readable and convenient method to handle small string operations, when using it to handle many strings (like building the page dynamically) the performance is severely damaged.

Worry no more! A solution is in hand...

The solution

The Array object join method provides us a way to join all the elements of an array into a single string separated by a specified string separator.

If we will assign each string as an element in the Array and will join all the elements with an empty char as our separator we will have the same result as using the + operator. This method is very similar to Java's StringBuffer object.

var buffer = new Array();

buffer[buffer.length] = "Hello";

buffer[buffer.length] = " World";

buffer.join("");



The benefit

The benefit of using Array.join to combine strings is pure performance issue.

In order to see how much the use of Array.join can benefit us let's do some benchmarking test with both methods.

We will use a simple code that combine some strings 10,000 times with both methods.

Here are the results:

Regular string concatenation:

1. IE 6 - Avarage runtime 646ms (Max value was: 810ms, Min value was: 460ms)



2. FireFox 1.5B1 - Avarage runtime 26ms (Max value was: 47ms, Min value was: 15ms)

Array.join:

1. IE 6 - Avarage runtime 26ms (Max value was: 32ms, Min value was: 15ms)



2. FireFox 1.5B1 - Avarage runtime 20ms (Max value was: 31ms, Min value was: 15ms)

The results are impressive Array.join show 2484% (!!!) improvement over regular strings in IE. While in FF the differences are insignificant which means the guys in Mozzila know their job :-)

Conclusion

Use the Array.join to boost up performance in you JavaScript web applications and provide your user more fluent and smooth user experience.

Test methods

function test1(){

var cycles = 10000;

var tp1 = new Date().valueOf();

var buffer = "";

for (var i = 0; i < cycles; i++)

buffer += "0123456789";

var tp2 = new Date().valueOf();

alert(tp2 - tp1);

}

function test2(){

var tp1 = new Date().valueOf();

var buffer = new Array();

for (var i = 0; i < cycles; i++)

buffer[buffer.length] = "0123456789";

var str = buffer.join("");

var tp2 = new Date().valueOf();

alert(tp2 - tp1);

}