Javascript 使用documentFragment的IE性能不好

为了测试DOM操作和innerHTML，我使用

documentFragment

（）将10000个

href

元素附加到

div

元素，设计了这个小测试方法。Chrome或Firefox的性能还可以，但IE（10、9、8）的性能非常差，大约需要10-12秒。有人能解释这种差异和/或详细说明一种提高IE性能的解决方案吗

这里有一个演示

方法：

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秒，而在Chrome/Firefox上，10000个元素大约需要2-300毫秒）。因此，对于IE（甚至是版本10），使用

innerHTML

向DOM添加一组元素是更快的方法。我认为IE仍然是开发人员的噩梦。

就我的经验而言，最好的好处是在片段中附加许多孤立的元素，并在所有子元素和属性都修复之前附加该元素（post append）。 如果我理解你的代码（我真的懒得去解码它），那么你会在片段中附加一个跨度。这不是documentFragment的意义。顺便说一下：你不应该在循环中声明你的变量

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

var node=document.getElementById（“任意”）
，frag=document.createDocumentFragment（）
，i=0，len=50，a={}，img={}；
例如（我以前从未听说过文档片段……嗨，Jan，添加了关于该主题的Resig文章的链接。我认为您测量时间的方式是有缺陷的。例如，您在片段计时的计时区域内定义了
useInnerHtmlBttn.onclick
处理程序。可能是这样的（JSFIDLE现在已调整），但最基本的一点是，IE使用这种方法非常非常慢。除了IE monstrum总是比较慢，而且总是需要tweeking才能工作之外，我不明白为什么。你的测量结果与你链接的文章中的观察结果不一致。
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);