3

为了测试 DOM 操作与 innerHTML 的对比，我使用documentFragment（网页）将 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;
}
4

2 回答 2

10

想我已经找到了：它看起来像，虽然 adocumentFragment应该是一个“离线”元素（一个不属于实时 DOM 的元素），但IE 并不这样对待它。强制片段真正脱机的方法是将一些元素附加到它，将其display属性设置为none并将其余元素附加到该元素。完成后，删除display:none属性，然后documentFragment可以将其附加到 DOM。

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

于 2012-12-30T10:00:50.117 回答
0

就我的经验而言，最大的好处是将许多孤立的元素附加到片段中，并且在所有子元素和属性都固定（附加后）之前不附加该元素。如果我理解你的代码（我真的懒得解码它），你会在片段中附加一个跨度。这不是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);

这样 IE8 Opera12 花费的时间与 innerHTML 差不多。真正的好处是铬。FF 使用 innerHTML 的速度令人难以置信。在旧的 XP 机器上测试。

要考虑的另一件事是创建一个未连接到具有所有子项和属性的 DOM 的节点，对其进行多次克隆，对其进行操作并将其附加到 documentFragment。

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

如果您不需要对克隆节点进行大量操作，这很有用。

于 2014-03-02T09:17:18.747 回答