3

To test DOM manipulation versus innerHTML I deviced this little test method using a documentFragment (web page) to append 10000 href elements to a div element. The performance is ok for Chrome or Firefox, but in IE (10, 9, 8) it's dramatically bad, it takes around 10-12 seconds. Can anyone explain this difference and/or elaborate on a solution to enhance performance for IE?

Here's a jsfiddle demonstrating it.

The method:

function useFragment(){
    var frag = document.createDocumentFragment(),
        i = 10000,
        rval = document.createElement('span');
    frag.appendChild(rval);
    do {
     var optText = 'option '+i
        ,ref = document.createElement('a') 
        ,zebra = i%2 ? 'zebra' : ''
        ,islist = true
        ,isSel = i === 5
     ;
     rval.insertBefore(ref,rval.firstChild);
     ref.appendChild(document.createTextNode(optText));
     ref.id = 'opt' + i;
     ref.className = zebra + (islist && isSel ? ' scrollSelect' : '');
     ref.href = '#' + i;
     ref.title = optText;
   } while (i-->0);
   return rval;
}
10
  • I've never heard of document fragments before... Dec 29, 2012 at 9:43
  • Hi Jan, added link to a Resig article on the subject.
    – KooiInc
    Dec 29, 2012 at 9:52
  • I think the way you measure the time is flawed. For example, you define the useInnerHtmlBttn.onclick handler inside the timed region for the fragment timing. Dec 29, 2012 at 10:14
  • That may be the case (jsfiddle is adjusted now), but the basic point is that IE is very, very slow using this method. Apart from the fact that the IE monstrum is always slower and always needs tweeking to make things work, I just can't figure out why.
    – KooiInc
    Dec 29, 2012 at 10:20
  • Your measurements disagree with the observation made in the article you linked. Dec 29, 2012 at 10:21

2 Answers 2

10

Think I've found it: it looks like, although a documentFragment should be an 'off line' element (an element that is not part of the live DOM) IE doesn't treat it as such. The way to force the fragment to really be off line is to append some element to it, set its display property to none and append the rest of elements to that element. After you are done, remove the display:none property and the documentFragment can be appended to the DOM.

It is still three times slower (on my PC it still takes around 1-1.5 seconds, versus around 2-300 ms in Chrome/Firefox for 10000 elements). So, for IE (even version 10), using innerHTML to add a bunch of elements to the DOM is the faster way. IE remains a developers nightmare, I'd say.

0

As far as my experience goes the best benefits are to append a lot isolated elements to the fragment and to append that element not before all children and attributes are fixed (post append). If I understand your code (I'm to lazy to decode it really) there is one span you append to the fragment. This is not the sense of documentFragment. By the way: You shouldn't declare your vars in a loop.

var node=document.getElementById("whatever")
   ,frag=document.createDocumentFragment()
   ,i=0,len=50,a={},img={};
for(i;i<len;i++){
   a=document.createElement("a");
   img=document.createElement("img");
   a.href="image"+i;
   img.className=J[i][1];
   img.src="image/img"+i+".png";
   img.alt="image:"+i;
   a.appendChild(img);
   frag.appendChild(a);
   }                     
node.appendChild(frag);

This way IE8 Opera12 takes quite the same time than innerHTML. The real benefit has chrome. FF is unbelievable fast with innerHTML. Tested on an old XP machine.

Another thing to think of is to create a node not connected to the DOM with all children and attributes, to clone it several times, to manipulate it and to append it to a documentFragment.

var frag=document.createDocumentFragment()
   ,toFill=document.getElementById("imageCollection")
   ,i=0,a={},img={}
   ,dummy=document.createElement("a")
   ;
dummy.innerHTML="<img src='img/image_' />";   
for(i;i<50;i++){
   a=dummy.cloneNode(true);
   img=a.getElementsByTagName("img")[0];
   a.href="description_"+i+".html";
   img.src+=i+".png";
   frag.appendChild(a);
   }            
toFill.appendChild(frag);   

This is useful if you don't need to make a lot of manipulations on the cloned node.

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.