Comments on: Fastest way to build an HTML string

By: Julien

Julien — Sat, 06 Jun 2009 06:33:54 +0000

I’d bet the developers of Chrome’s JS engine actually optimized the “ugly” method knowing that as you stated, it probably is the most common.

By: GR

GR — Wed, 03 Jun 2009 20:45:07 +0000

Sweet thanks!

By: James

James — Wed, 03 Jun 2009 20:21:50 +0000

Here’s how I tested: http://pastie.org/499582

@redsquare, IE6 uses the same JS engine as IE7 – the results would be very similar.

By: GR

GR — Wed, 03 Jun 2009 20:15:54 +0000

How are you guys testing?

By: Sean

Sean — Wed, 03 Jun 2009 14:41:27 +0000

It seems my method is not faster:
IE 8
Concat: 161
Arraypush: 320
HolyGrail: 72
My method: 263

FireFox 3
Concat: 135
Arraypush: 127
HolyGrail: 39
My method: 140

By: Sean

Sean — Wed, 03 Jun 2009 11:11:41 +0000

var arr = ['item 1', 'item 2', 'item 3'...];
var l= arr.length;
list = new Array(2+3* l);
list[0]='[ul]';
for (var i = 0; i < l; i++) 
{
	var j=i*3;
	list[j+1] = '[li]';
	list[j+2]=arr[i];
	list[j+3] ='[/li]';
}
 
list[list.length]='[/ul]';
 
list = list.join('') ;

Should be faster than any method above although maybe not as elegant

By: redsquare

redsquare — Mon, 01 Jun 2009 19:16:09 +0000

Cheers James, what happened to our best friend ie6!

By: GR

GR — Mon, 01 Jun 2009 15:33:06 +0000

How do you benchmark?

By: Vasili

Vasili — Sat, 30 May 2009 15:01:16 +0000

@Matthieu: You could just use a ternary operator.

var arr = ['item 1', 'item 2', 'item 3', ...];
 
var list = (arr.length) ? '' + arr.join('') + '' : '';

By: Matthieu

Matthieu — Sat, 30 May 2009 12:12:27 +0000

what about doing:

var arr = ['item 1', 'item 2', 'item 3', ...],
    list = "";
 
for (var i = 0, l = arr.length; i < l; i++) {
    list = list + '' + arr[i] + '
';
}
 
list = list + '
';

That way, if the array is empty, you dont get an empty [li] in the ul !

Could you add this method to your bench?