CODEWITHSUNDEEP
javascripthtmlperformance
FoobarisMaximus
FoobarisMaximus

Reputation: 1129

HTML/Performance: Handling massive dynamic DOM insertion

I have 464 JSON objects. An HTML element needs to be generated from each of these elements, and inserted into a div in sequential order. What's going to be the fastest way to render this?

A) Loop through the objects, generating markup for each, concatenating them all, and setting the innerHTML of the container div to the concatenated markup:

document.getElementById("container").innerHTML = 
    jsonItems.map(function(item) {
        return convertToHTMLString(item);
    }).join("");

B) Loop through the objects, generating a DOM node for each, and inserting each sequentially into container:

var container = document.getElementById("container");

jsonItems.forEach(function(item) {
    container.appendChild(convertToDOMNode(item));
});

C) Loop through the objects, generating a DOM node for each, sequentially appending them to a DocumentFragment, then inserting the fragment into the container:

var fragment = document.createDocumentFragment();

jsonItems.forEach(function(item) {
    fragment.appendChild(convertToDOMNode(item));
});

document.getElementById("container").appendChild(fragment);

Upvotes: 2

Views: 1691

Answers (5)

Saeed Neamati
Saeed Neamati

Reputation: 35832

We had the same issue a time ago, not in this scale, but large enough. We ended up creating the HTML at the server level (because it's fast) using binding, then appending the sent HTML fragment to the parent div element once in the client side in success callback of the ajax call. It was faster than any other method you described here, and the respond size (traffic usage) increased only 20 KB, which, in our case was acceptable. Hope that this help :)

Upvotes: 0

oazabir
oazabir

Reputation: 1609

The performance of innerHTML vs DOM is going to be not so significant compared to the approach you are using to generate the nodes. I am sure the innerHTML one will be fastest given the convertToHTML function is faster than the other ones. innerHTML makes just one DOM call and it's browser's machine code that parses the string and creates DOM node and injects into the DOM in one shot. That got to be the fastest over any javascript approach that's interpreted code. If you can make ConvertToHTML to outperform all other convert functions than innerHTML is fastest.

Upvotes: 0

Raynos
Raynos

Reputation: 169401

Benchmark

The correct answer is please benchmark it yourself :)

I personally think .innerHTML is the devil so use document fragments.

And I think we all know document fragments are superior to injecting data directly into the DOM. It's the exact same logic as rendering stuff off the screen then swapping it back in.

Upvotes: 2

samandmoore
samandmoore

Reputation: 1231

I would use the DocumentFragment. I would definitely not use option 2 because that will require the page to re-render on every insert. Check out a speed test done on this subject by mr. jQuery himself, j. resig. He suggests using the DocumentFragment as it provides a 2-3x performance gain in his testing.

http://ejohn.org/blog/dom-documentfragments/

Upvotes: 0

haloperidol
haloperidol

Reputation: 21

B would be the slowest for sure, almost all js tutorials recommend against doing this. On second thought C could be slow too because appendChild is a DOM modification wich is always slower. Theres also an older experiment you can run on the page yourself: http://andrew.hedges.name/experiments/innerhtml/

Upvotes: 0

Related Questions