在IE8中存在DOM内存问题（插入大量JSON数据）

7 浏览
0 Comments

在IE8中存在DOM内存问题（插入大量JSON数据）

我正在开发一个小型的Web工具，用于显示一些数据库表中的数据。

在火狐、Safari、Chrome等浏览器上，这个工具运行得很好，但是IE8上的内存管理非常糟糕。最大的JSON请求将返回足够在浏览器中创建大约5000行左右的数据（表中有3列）。

我使用jQuery获取数据（通过getJSON）。为了删除旧的/现有的表格，我只是使用$('#my_table_tbody').empty()。为了将新信息添加到表格中，在getJSON回调函数中，我只是将每个正在创建的表格行追加到一个变量中，然后一旦我拥有它们所有，我使用$('#my_table_tbody').append(myVar)将其添加到现有的tbody中。我不会在创建时添加表格行，因为这比一次添加它们要慢得多。

有没有人有任何关于如何向DOM添加成千上万行数据的建议？我想避免分页，但我不知道是否有选择。

更新 1

下面是我在innerHTML建议之后尝试的代码：

/* 假设一个名为'main_area'的div容纳表格 */
document.getElementById('main_area').innerHTML = '';
$.getJSON("my_server", {my: JSON, args: are, in: here}, function(j) {
   var mylength = j.length;
   var k =0;
   var tmpText = '';
   tmpText += /* 在这里添加表格、thead内容和tbody标签 */;
   for (k = mylength - 1; k >= 0; k--)
   {
      /* stack overflow不允许我在这里输入大于号和小于号，所以假设它们在那里。 */
      tmpText += 'tr class="' + j[k].row_class . '"   td class="col1_class" ' + j[k].col1 + ' /td td class="col2_class" ' + j[k].col2 + ' /td  td class="col3_class" ' + j[k].col3 + ' /td /tr';
   }
   document.getElementById('main_area').innerHTML = tmpText;
}

这就是大意。我还尝试了只使用$.get请求，并让服务器发送格式化的HTML，并将其设置在innerHTML中（即document.getElementById('main_area').innerHTML = j;）。

感谢所有的回复。你们愿意帮助我，我感到非常惊讶。

0

3 答案

0 Comments

DOM内存问题是由于在IE8中插入大量JSON数据时出现的。解决方法是使用innerHTML赋值作为更好的方法。可以在服务器上使用jsp来生成innerHTML，然后通过ajax一次性将其流式传回。这样可以加快速度，减少JavaScript的复杂性，并将标记创建委托给适当的位置。尝试在服务器上生成HTML并以整块方式插入，通过innerHTML插入。使用php作为服务器端时可以尝试这种方法。如果对方给出负面评价，请解释原因。我需要尽可能多的帮助，我肯定不会因为尝试而给别人点踩。

0
0 Comments

DOM在IE8中的内存问题（插入大量的JSON数据）

在IE中，如果想要获得快速响应的话，你应该将表格行创建为HTML的字符串表示形式，将它们附加到一个字符串变量中，然后将结果添加到表格的tbody中，代码如下：

myTable.myTbody.innerHTML = allThoseRowsAsAString;

这不是一个内存问题：5000行应该是微不足道的。这肯定小于1兆字节。

实际上，重复附加字符串并不是一个好主意，在IE中尤其如此（IE8可能比IE6和7要好）。

如果你想避免内存泄漏，连接大字符串是最糟糕的做法之一。

我只是说字符串连接是向页面添加大量标记的最快方法，尤其是在IE中。阅读这个stackoverflow.com/questions/112158/…线程，其中对将字符串连接作为瓶颈的观点被驳斥了。

IE8在innerHTML方面有一些bug。当我尝试这样做时，它给了我一个错误。

我让innerHTML工作了，但它没有解决我的任何内存问题。未压缩时，我们大约有1.5兆字节的JSON数据（Apache在请求中将其减少到大约85k）。1.5兆字节的JSON仍然会导致内存增加100兆。

你是否安装了dynatrace并对时间的消耗进行了一些调查？

0
0 Comments

DOM memory issue with IE8 (inserting lots of JSON data) 这个问题的原因是在循环中使用了字符串拼接，导致DOM对象的内存消耗过大。解决方法是使用数组来存储数据，然后使用join方法将数组转换为字符串，并利用jQuery的html函数来更新DOM。

下面是示例代码：

var tmpText = [];
for (k = mylength - 1; k >= 0; k--) {
    tmpText.push('anything you want');
    tmpText.push('' + j[k].col1 + '' + j[k].col2 + '' + j[k].col3 + '');
}
$('#main_area').html(tmpText.join(''));

在这个代码中，我们使用了一个数组tmpText来存储每一行的HTML代码。在循环中，我们先将自定义的内容添加到数组中，然后使用字符串拼接的方式生成一行的HTML代码，并将其添加到数组中。最后，我们使用join方法将数组中的所有元素连接起来，并使用jQuery的html函数将结果更新到DOM中。

这种方法相比于直接在循环中使用字符串拼接，可以有效地减少内存消耗，提高性能。这是因为在循环中直接拼接字符串会导致每次都生成一个新的字符串对象，而使用数组则可以避免这个问题。

希望这个解决方法能帮助到你！

0