Search jQuery

jQuery Forum

Why does wrapping large groups of elements before insertion increase performance?

in Using jQuery • 10 years ago

What I'm interested in is an explanation of why the Third Method completes in less than half the time as the Second Method, when the only difference between the two is that, in the Third Method, there's a div element wrapped around the string that contains the 1000 divs to insert. I've seen this tip mentioned all over the place, but I have yet to see a reason WHY using a wrapper is faster.

var arrLen = 1000;
var arr = [arrLen];
for(var i=0; i<arrLen; i++) {
arr[i] = i;
}

Second Method: Inserting Once Using String

var appendString = "";
$.each(arr, function() {
appendString += "<div>" + this + "</div>";
});
$('#parent').append(appendString);

Completion Time: 10ms

Third Method: Inserting With Wrapping Element

var appendString = "";
$.each(arr, function() {
appendString += "<div>" + this + "</div>";
});
$('#parent').append('<div>' + appendString + '</div>');

Completion Time: 4ms

Thanks

Replies(3)

jakecigar

Re: Why does wrapping large groups of elements before insertion increase performance?

10 years ago

Third Method inserts 1 node with many children. Second Method inserts many nodes.

Children are almost free, nodes take time. Grouping nodes is better than not grouping them, but not as good as wrapping them into a single node.

The worst time would be writing something like this.

$.each(arr, function() {
$('#parent').append( "<div>" + this + "</div>");
})

JΛ̊KE

kaheidt

Re: Why does wrapping large groups of elements before insertion increase performance?

10 years ago

Thank you for the quick reply.

When you say "grouping nodes", are you referring to the single append of a string that has all 1000 divs in it?

What you're saying about children opposed to nodes makes sense. But since you're obviously an excellent source of knowledge, let me take advantage of you by asking a followup

If adding an additional node to the DOM strictly for the purpose of being a wrapper node to speed up the insertion of the 1000 divs complicates things due to pre-existing logic, which would be the best alternative as far as trying to achieve the same performance increase?

Detaching the node that the 1000 divs was going to be put into, then wrap it around the grouped divs, then append the detached node back into place in the DOM
Appending the wrapper node with the 1000 divs as children, then unwrap the children to remove the wrapper node
[Feel free to offer a better solution]

I feel like #2 wouldn't be very good since the unwrap method is called on the element(s) that will then have their parents removed, which in this case would result in a collection of 1000 divs. In my experience, this can be very sluggish.

Thanks again for your reply. This has been a white whale issue for me.

jakecigar

Re: Why does wrapping large groups of elements before insertion increase performance?

10 years ago

<span>foo</span><span>bar</span> are grouped (not the technical name, just one I used to describe them)

I would try to use .replaceWith(…) to use the parent node or just be happy with the extra parent node.

I don't think .unwrap() would be slow, but If I was using it in a very often on one page I would test it first.

BUT, if you do this once on a page , I would suggest you read Moby Dick rather than chase this white whale.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Why does wrapping large groups of elements before insertion increase performance?

Replies(3)

Re: Why does wrapping large groups of elements before insertion increase performance?

Re: Why does wrapping large groups of elements before insertion increase performance?

Re: Why does wrapping large groups of elements before insertion increase performance?

Statistics

Tags

Actions