使用documentFragment的IE性能不佳

Question

为了测试DOM操作与innerHTML,我使用documentFragment(网页)将这些小href元素附加到div元素上.Chrome或Firefox的性能还可以,但在IE(10,9,8)中它的表现非常糟糕,大约需要10-12秒.任何人都可以解释这种差异和/或详细说明提高IE性能的解决方案吗？

这是一个展示它的jsfiddle.

方法:

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;
}

Answer 1

我想我已经找到了它:它看起来像,虽然documentFragment应该是一个"离线"元素(即不活DOM的一部分元素)IE不对待它.强制片段真正离线的方法是向其附加一些元素,将其display属性设置为none并将其余元素附加到该元素.完成后,删除该display:none属性,并将documentFragment其附加到DOM.

它仍然慢三倍(在我的电脑上它仍然需要大约1-1.5秒,而对于10000个元素,Chrome/Firefox大约需要2-300毫秒).因此,对于IE(甚至是版本10),使用innerHTML向DOM添加一堆元素是更快的方法.我会说,IE仍然是开发者的噩梦.