javascript中的内存泄漏，循环内的函数

Question

我正在循环从 ajax 响应中获得的响应，该响应是一个包含 1000 个对象的数组，该响应用于创建一个包含 1000 行的 html 表：

第一种情况：

    for (var i in msg.myObjects) {
    $('#mytablebody').append('<tr><td>' + msg.myObjects['item1'] + '</td><td>' + 
msg.myObjects['item2'] + '</td><td>' + msg.myObjects['item3'] + '</td><td>' + 
msg.myObjects['item4'] + '</td><td>' + msg.myObjects['item5'] + '</td><td>' + 
msg.myObjects['item6'] + '</td><td>' + msg.myObjects['item7'] + '</td> .... </tr>');
    }

结果 => 内存泄漏我的 RAM 去了 2Go，我的浏览器崩溃了

第二种情况：

    for (var i in msg.myObjects) {
        document.getElementById('mytablebody').innerHTML = document.getElementById('mytablebody').innerHTML + '<tr><td>' + 
msg.myObjects['item1'] + '</td><td>' + 
    msg.myObjects['item2'] + '</td><td>' + msg.myObjects['item3'] + '</td><td>' + 
    msg.myObjects['item4'] + '</td><td>' + msg.myObjects['item5'] + '</td><td>' + 
    msg.myObjects['item6'] + '</td><td>' + msg.myObjects['item7'] + '</td> .... </tr>';
        }

结果 => 内存泄漏，我的 RAM 达到 800Mo，我的浏览器因第二个 ajax 调用而崩溃

第三种情况：

var stringResponse = '';
        for (var i in msg.myObjects) {
            stringResponse += '<tr><td>' + msg.myObjects['item1'] + '</td><td>' + 
        msg.myObjects['item2'] + '</td><td>' + msg.myObjects['item3'] + '</td><td>' + 
        msg.myObjects['item4'] + '</td><td>' + msg.myObjects['item5'] + '</td><td>' + 
        msg.myObjects['item6'] + '</td><td>' + msg.myObjects['item7'] + '</td> .... </tr>';
            }
document.getElementById('mytablebody').innerHTML = stringResponse 

结果 => 没有内存泄漏

好的，直到这里我得出结论，首先，.append() 会导致内存泄漏，其次，你不应该在循环中使用 DOM 元素。但是当我做第 4 个场景时，我得出的结论是第一个结论是错误的（不完全正确），而第二个结论仍然是正确的。

第四种情况：

    var stringResponse = '';
            for (var i in msg.myObjects) {
                stringResponse += '<tr><td>' + replaceNulls(msg.myObjects['item1']) + '</td><td>' + 
            msg.myObjects['item2'] + '</td><td>' + msg.myObjects['item3'] + '</td><td>' + 
            msg.myObjects['item4'] + '</td><td>' + msg.myObjects['item5'] + '</td><td>' + 
            msg.myObjects['item6'] + '</td><td>' + msg.myObjects['item7'] + '</td> .... </tr>';
                }
    document.getElementById('mytablebody').innerHTML = stringResponse 

function replaceNulls(input) {
  return input != null ? input : ''
}

结果 => 内存泄漏我的 RAM 去了 2Go，我的浏览器崩溃了

我的问题是：

当我们调用发生在循环之外的函数时，可能会导致内存泄漏，为什么？

如何避免这种情况（不删除函数或将其处理移至循环内部）？

Answer 1

现代网络浏览器的 1000 个表条目应该不会导致任何问题。

在这里，我将 10,000 个项目添加到一个没有 ram 问题的表中。 它快速的原因是因为我在一个分离的 DOM 元素中构建了列表，然后在完成后附加。

您的问题可能只是 DOM 绘制问题，浏览器必须重新绘制所有更新。

我注意到的另一件事，for (var i in msg.myObjects) 取决于您的 msg.myObjects 包含的内容，这不是一件好事。如果你可以使用现代 JS，。 for (const i of msg.myObjects) 更好。

var table = document.querySelector("table");

var tbody = document.createElement("tbody");

function addLine (txt) {
  var tr = document.createElement("tr");
  var td = document.createElement("td");
  tr.appendChild(td);
  td.innerText = txt;
  tbody.appendChild(tr);
}

for (var l = 1; l <= 10000; l += 1) {
  addLine("This is Line " + l + ", and some extra text");
}

table.appendChild(tbody);

<table>
  <thead><tr><th>Test</th></tr></thead>

</table>