CODEWITHSUNDEEP
javascriptjqueryarraysstringperformance
lightning_missile
lightning_missile

Reputation: 2992

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

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?

Upvotes: 2

Views: 713

Answers (3)

gyre
gyre

Reputation: 16777

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)

Upvotes: 4

Yunchi
Yunchi

Reputation: 5537

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.

Upvotes: 2

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

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.

Upvotes: 0

Related Questions