Question

我在将大量数据加载到DOM方面遇到了一个大问题。事实上，只有IE11才是这里的交易破坏者。这是一些示例代码，基本上我这样做：

  var concat = [];
  for (var i = 0; i < 10000; i++) {
    concat[i] = "<li value='"+'XYZ' + i+"'>"+'XYZ ' + i+"</li>";
  }
  var element = conc.join('');
  $('ul.mylist').append(element);

现在，它分解为一个非常基本的例子，它的灵感来自于我在类似主题中找到的jsFiddle：

http://jsfiddle.net/bVAFF/152/

小提琴在IE中运行良好！

我插入大块的列表元素，最多可达~10,000。这很好用，因为我将单个元素连接成一个大字符串，最后附加到DOM。

至少它在Chrome和Firefox上表现很好，插入数据需要1-2秒，而IE11需要MINUTES才能从注射癫痫发作中恢复。我正在尝试更大的数据量：高达9MB / 70.000元素的字符串（！）仍然加载“meh”（但我当时没有在IE上测试这个）。

我必须承认，我为真实注入的字符串比（非常简单）示例中的字符串大，但仍然：它在Chrome和FF上表现很好。只有IE冻结了！

有人知道为什么会这样吗？

来自柏林的问候！

亚哈

Answer 1

预留jquery，这增加了自己的开销，在IE中分配给innerHTML相当快 -

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>dynamic list</title>
<style>
</style>
<script>
onload= function(){
    var start= new Date();
    var pa= document.querySelector('ul.mylist'), 
    timer= document.querySelector('h1'), 
    conc= [];
    for(var i= 0; i<10000; i++){
        conc[i]= '<li title= "XYZ' + i+'">XYZ ' + i+'</li>';
    }
    pa.innerHTML+= conc.join('\n');
    str= ' time: '+(new Date()-start)+' milliseconds'
    timer.appendChild(document.createTextNode(str));
}
</script>

</head>
<body>
<h1>New list </h1>
<ul class="mylist">
<li title="First list item">First list item</li>
</ul>
</body>
</html>

<!-- samples

IE 11: 130msec
Opera 22: 213 msec
FFox 31: 50msec
Chrome36: 125msec

-->

Answer 2

感谢目前为止的答案，虽然他们没有帮助......

但我必须承认，我在帖子中忘记了一个非常重要的细节。

我从SOAP信封中获取列表内容（很多内容），其中包含我稍后要解析的大型JSON字符串。

然而，解析XML SOAP信封的过程就是把所有东西都冻死了！

$(data).find('json_content').text();

那是旧操作。现在，在进行“手动”XML遍历时，我可以直接访问JSON字符串：

var jsonString = 
data[0].documentElement.
childNodes[0].childNodes[0].childNodes[0].firstChild.nodeValue;

解析字符串，连接它，甚至将内容粘贴到DOM中只需几秒钟。它比Chrome和Firefox慢，但现在（终于！）我说的是秒。不。分钟。

我还测试了innerHTML并将其与jQuery.append（）进行了比较。

innerHTML几乎没有更快。：P

来自B的Greetz！

Answer 3

为后代

我发现首先将包装器插入DOM（在它有任何子节点之前）将其从冻结页面加速到仅需3秒

最初我创建了一个文档片段，并在正确填充之后添加它（尽管这是最佳实践）。显然，如果片段包含10k个孩子，IE 11就会窒息。

在IE11中添加大量元素的速度非常慢

3 个答案: