Benefits of `array.join` over string concatination while manipulating jQuery elements?

Question

According to this

The syntax for adding new elements to the page is easy, so it's tempting to forget that there's a huge performance cost for adding to the DOM repeatedly. If you're adding many elements to the same container, you'll want to concatenate all the HTML into a single string, and then append that string to the container instead of appending the elements one at a time. Use an array to gather all the pieces together, then join them into a single string for appending:

Why do we have to use an array? What's wrong with just repeatedly appending to a string directly? Isn't string concatination suppose to be faster than array join?

I think may be it's an old article when array join was faster that string concatenation — Vinay, Dec 07 '16 at 03:58

gyre · Answer 1 · 2016-12-11T22:13:53.120

The performance cost exists because the innerHTML property on DOM elements doesn't behave like a simple plain-object property update. Every time you set the value of innerHTML, the browser does magic behind the scenes. It has to go through the trouble of firing up the HTML parser and generating those new tags, replacing whatever node tree was there previously.

The anti-pattern element.innerHTML += string is one of the worst because that causes the browser to first stringify all of the HTML within the target element, append a new string to the end of that HTML, and then parse that entire node tree all over again even before reaching whatever else you've added.

This is incredibly painstaking, to say the least.

Concatenation is totally fine if you are using a local variable. The point is, never concatenate on the innerHTML property directly.

var html = '<p>stuff</p>'
html += '<p>more stuff</p>'
html += '<p>even more stuff</p>'
html += '<p>extra stuff</p>'
element.innerHTML = html

However, if you need to update the DOM immediately and/or frequently, prefer creating and appending new nodes over innerHTML. For example,

var element = document.createElement('p')
element.textContent = 'Hello World'
document.body.appendChild(element)

score 2 · Accepted Answer · answered Dec 07 '16 at 04:00

Looking at the page you linked, I think you are asking why is it better to do

var myItems = [];
var myList = $( "#myList" );

for ( var i = 0; i < 100; i++ ) {
    myItems.push( "<li>item " + i + "</li>" );
}

myList.append( myItems.join( "" ) );

instead of

var myItems = "";
var myList = $( "#myList" );

for ( var i = 0; i < 100; i++ ) {
    myItems += "<li>item " + i + "</li>";
}

myList.append( myItems );

This is, in my opinion, entirely subjective, and the thing you quoted is not really a recommendation for array appending or string concatenation. The main benefit to using arrays is actually tangential in that it's easier to manipulate an array and write maintainable and readable code than it is to do the same with a string.

The other answers seem to be answering why is it bad to do

var myItems = "";
var myList = $( "#myList" );

for ( var i = 0; i < 100; i++ ) {
    myList.append( "<li>item " + i + "</li>" );
}

And yeah, that's because calling myList.append() over and over is repeatedly modifying the DOM and that can become very very slow. Calling it once would be much faster.

There was a time (older IE, I forget which version(s)) when adding to an array and then doing a `.join()` at the end was significantly faster than a large number of string concatenations, so if looping over thousands of items the array technique was preferred. (The difference was measurable, so it wasn't subjective.) — nnnnnn, Dec 07 '16 at 04:33

score 0 · Answer 3 · answered Dec 07 '16 at 03:48

0

Its about the DOM manipulation cost. Each time you invoke DOM to add/ delete a node the browser has to look up the mark-up and create the DOM for you and in that the operation is done.

This operation of creating DOM is costly so to reduce it and enhance performance we inject all the elements at once.

answered Dec 07 '16 at 03:48

Ajay Narain Mathur

5,326
2
20
32

Yeah, but the question is about whether to build up a string using string concatenation or an array (not about the part where the result gets assigned to some DOM element). – nnnnnn Dec 07 '16 at 04:42

Benefits of `array.join` over string concatination while manipulating jQuery elements?

3 Answers3