javascript - 使用 documentFragment 的 IE 性能不佳

Question

为了测试 DOM 操作与 innerHTML，我使用 documentFragment ( web page ) 将 10000 个 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。

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