在 IE11 中添加大量元素非常慢答案

【问题标题】：Appending large groups of elements in IE11 enormously slow在 IE11 中添加大量元素非常慢
【发布时间】：2014-09-14 19:39:44
【问题描述】：

在将大量数据加载到 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冻结！

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

来自柏林的问候！

亚哈

【问题讨论】：

欢迎使用 Internet Explorer。
好吧，假设 IE 性能不是那么好，那么您不能创建这么多元素。确保用户不能一起阅读它们，因此您可以逐步构建页面。分页？无限滚动？由你决定......
您的问题似乎无法得到可靠的回答。至少，回答者必须非常熟悉 IE 的内部运作。我不知道社区中是否存在此类成员，如果存在，我不确定他们是否愿意在浏览器中公开记录性能问题。
您在小提琴中工作的过于简化的示例是否在您的其他环境中不起作用？还是简化它使问题消失了。
@sWW 当然，我不是 IE 粉丝，但实际上 .append() 非常慢。如果删除它并通过innerHtml 直接设置内部 HTML，则 IE 中的代码性能也会不错。 这里的问题不是浏览器而是代码...

标签： javascript jquery append internet-explorer-11

【解决方案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

-->

【讨论】：

我找到了解决方案，我不得不承认，我隐藏了一个非常重要的细节。

【解决方案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 的问候！

【讨论】：

【解决方案3】：

为了后代

我发现首先将包装器插入 DOM（在它有任何子级之前）可以加快它从冻结页面到只需要 3 秒的速度

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

【讨论】：

嗨@CheapSteaks，你能解释一下关于这种方法的更多细节吗？我想我现在和你有类似的情况。这将是一个巨大的帮助，谢谢。