2

My question is if anybody has any ideas in how to append an HTML string containing many nodes directly to an existing DOM element with utmost performance in mind.

Let me explain what I am doing. I am creating a javascript templating script. Right now it is wicked fast. I'm able to render 40,000 multi-array items from JSON as html nodes into the DOM in just over 3 seconds (Chrome 16 running on OSX macbook pro).

After I have parsed the string I insert it into a newly created span tag via .innerHTML and then append that span tag to the DOM. Its bloody quick, efficient and slick, but damn, it just won't work. Why? Because it wraps the nodes with an extraneous tag and this will, undoubtedly in some cases, interfere with CSS and who knows what else. So, I need to be able to append multiple newly created DOM nodes directly under an existing HTML tag.

So I switched from appending the span tag (along with all of its html assigned via innerHTML) to looping through each child node of that span and appending them separate. But, man, is it much slower! It takes almost 20 seconds to render 40,000 entries as opposed to 3 seconds.

And I'm steering clear of jquery for this specific project. And, no, I'm never anticipating having 40,000 items rendered to a page in a real world situation. I'm just doing this to test the speed. I want the script to be absolutely as fast as possible.

1
  • Why as SPAN? All those nodes are inline? A DIV would be the generic choice here. Feb 4, 2012 at 1:32

2 Answers 2

4

Use document.createDocumentFragment(). (Docs: msdn, mdn)

var span = document.createElement("span");
span.innerHTML = html;
var frag = document.createDocumentFragment();
while (span.childNodes.length) {
    frag.appendChild(span.childNodes[0]);
}
document.body.appendChild(frag);

Read what John Resig (Author of jQuery and Sizzle) had to say about performance improvements from using document.createDocumentFragment().


IE supports element.removeNode(false) which will remove the element from the DOM, leaving its child nodes in the DOM. But that doesn't help you much with other browsers.

2
  • Right on gilly3. Thanks for your response on this--you definitely pointed me in a better direction. I read the article you suggested and it turns out that documentFragments really do have performance advantages. I assumed that it would be slower to loop through each node, append it to a fragment, then append the fragment to the DOM...as opposed to just looping through and appending directly to the DOM. But, as it turns out, using the documentFragment gave me about a 20-30% increase in performance--not bad. What would be awesome is if we could assign innerHTML directly to a documentFragment. Feb 5, 2012 at 16:21
  • The hope was for something that wouldn't require iterating over childNodes by hand. Apr 9 at 8:57
3

For append HTML string containing many nodes directly to an existing element you can use:

  1. insertAdjacentHTML (IE4, Ch1, FF8, Op7). It is best option and very simple.

  2. append, prepend, after, before, replaceWith (Ch54, FF49, Op39). Convenient API but works only in new browsers.

  3. Temporary node with outerHTML (IE4, Ch1, FF11, Op7). Before changing outerHTML you should append your node to some another node.

  4. Temporary node with innerHTML (all browsers) but you cannot delete this node from DOM so it is worst option.

  5. Parse HTML string using innerHTML or something else and append resulting nodes one by one to needed element (or all at once using methods below). This may be needed only for FF7- that does not support insertAdjacentHTML. But no one use such an old version.


For append many nodes (not a string) at once you can use:

  1. append, prepend, after, before, replaceWith (Ch54, FF49, Op39).

  2. DocumentFragment (all browsers). This is temporary container for nodes. When you append the container to some other node there is child nodes are appending not the container. After that the container will contains 0 children. It looks like the container disappears from DOM.

  3. appendChild or insertBefore many times (all browsers). It has worst performance.

  4. Calculate outerHTML of each node, concatenate results to one string and append this string using methods above. Performance is unknown so not recommended.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.