使用 documentFragment 的 IE 性能不佳

为了测试 DOM 操作与innerHTML，我使用了这个小测试方法documentFragment (web page) 追加 10000href元素到一个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;
}

我想我已经找到了它：它看起来像，虽然documentFragment应该是一个“离线”元素（不属于实时 DOM 的元素）IE 不这么对待它。强制片段的方式really离线就是向其附加一些元素，设置它的display财产给none并将其余元素附加到该元素。完成后，删除display:none财产和documentFragment可以附加到 DOM。

它仍然慢了三倍（在我的 PC 上，它仍然需要大约 1-1.5 秒，而在 Chrome/Firefox 中，10000 个元素大约需要 2-300 毫秒）。因此，对于 IE（甚至版本 10），使用innerHTML向 DOM 添加一堆元素是更快的方法。我想说，IE 仍然是开发者的噩梦。