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

在向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需要几分钟才能从注入癫痫中恢复过来。我正在试验更大的数据量:高达9MB/70.000个元素的字符串(!)仍然加载"meh"(但当时我没有在IE上测试)。

我不得不承认，我真正注入的字符串比(非常简单)示例中的字符串大得多，但仍然:它在Chrome和FF上表现出色。只有IE死机了!

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

来自柏林的问候!

亚哈

不考虑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
-->

感谢到目前为止的回答，虽然他们不是很有帮助…

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

我从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

from B!

为了子孙后代

我发现首先将包装器插入DOM(在它有任何子节点之前)可以将冻结页面的速度提高到只需要3秒

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

相关内容

最新更新

热门标签：