javascript – 使用documentFragment的IE性能不佳

为了测试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;
}

解决方法:

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

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

标签：dom-manipulation,javascript,internet-explorer
来源： https://codeday.me/bug/20190725/1536180.html