say I have an array of objects with html strings inside (there are other things, but i'm specifically focusing on the html property of each object. e.g.

var items = [{
    html: '<div>test</div>'
}, {
    html: '<div>test</div>'
}, {
    html: '<div>test</div>'
}];

I need to build a string using all of these strings and I need them in the same order they're given to me, so a reverse while loop is out.

is there anything faster at building the html than the following?

var html = [];
for (var i = 0, itemLen = items.length; i < itemLen; i++) {
    html.push(items[i].html)
}
output.innerHTML = html.join('');

say I have an array of objects with html strings inside (there are other things, but i'm specifically focusing on the html property of each object. e.g.

var items = [{
    html: '<div>test</div>'
}, {
    html: '<div>test</div>'
}, {
    html: '<div>test</div>'
}];

I need to build a string using all of these strings and I need them in the same order they're given to me, so a reverse while loop is out.

is there anything faster at building the html than the following?

var html = [];
for (var i = 0, itemLen = items.length; i < itemLen; i++) {
    html.push(items[i].html)
}
output.innerHTML = html.join('');

• javascript
• performance

Share Improve this question Follow asked Mar 2, 2012 at 18:44 testertester 23.2k2626 gold badges9090 silver badges129129 bronze badges 5

• The only way to know for sure is to profile different approaches: jsperf.. – Felix Kling Commented Mar 2, 2012 at 18:51
• Here is the test for different approaches: jsperf./string-concatenation-perf – Felix Kling Commented Mar 2, 2012 at 18:54
• 1 Why would you do a reverse while loop? – Lightness Races in Orbit Commented Mar 2, 2012 at 19:33
• @LightnessRacesinOrbit technically they're the fastest loops: var i = arr.length; while (i--) {}, the only problem is that if i used it to build this string, it would be in reverse order.. so i would have to reverse the data then loop through it, which ends up being more expensive than a regular for loop.. – tester Commented Mar 3, 2012 at 8:43
• @tester: Why are they the fastest? – Lightness Races in Orbit Commented Mar 3, 2012 at 17:30

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

faster would be:

var html = '';
for (var i = 0, itemLen = items.length; i < itemLen; ++i)
    html += items[i].html;
output.innerHTML = html;

Edit:

This is faster:

var html = '';
for (var i = 0, itemLen = items.length; i < itemLen; html += items[i++].html);

This is much faster than yours

var html = '';
for (var i = 0, itemLen = items.length; i < itemLen; i++) {
    html += items[i].html;
}
output.innerHTML = html;

var html = '';
for (var i = 0, itemLen = items.length; i < itemLen; i++) {
    html += items[i].html;
}
output.innerHTML = html

Simply concatenating to a string would be faster than building an array and imploding it as that technically double loops the data instead of looping it once.

This does the trick too:

var items = [
    {html: '<div>test</div>'},
    {html: '<div>test</div>'},
    {html: '<div>test</div>'}],
    newString = "";
items.forEach(function(item) {
    newString = newString + item.html;
});

Demo.

Warning this is solution could cause a lot problems. But it does give a relatively fast way to do what you want.

var items = [{
    html: '<div>test</div>'
}, {
    html: '<div>test</div>'
}, {
    html: '<div>test</div>'
}];

Object.prototype.toString=function(){return this.html};

items.join('');

If there is anyway to control the object that gets added to the array in the first place then you can change only that object's prototype which won't mess with the global Object.