JavaScript Performance Issues - Lesson 1

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.

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.

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);
}