Question

我使用动态表：

<html>
<body>
<button id="button">Build table</button>
<div id="container">
<script type="text/javascript">
window.onload=function(){
 var table = null;

 var row = "<tr><td>111111111111111111111111111111111111111111111111111111</td>" +
           "<td>222222222222222222222222222222222222222222222222222222</td>" +
     "<td>333333333333333333333333333333333333333333333333333333</td></tr>";
 var data = null;
 for (var i = 0; i < 2000; i++){
  data += row;
 }

 var obj = document.getElementById("button");
 obj.onclick=function buildTable(){
  document.getElementById("container").innerHTML = "<div><table><tbody>" + data + "</tbody></table></div>";
 };
};
</script>
</body>
</html>

使用chromes任务管理器，每次加载新数据时，内存使用量会大幅增加而不会下降，因此一段时间后应用程序会消耗大量内存并需要关闭浏览器。我可以用来解决这个问题的代码有什么变化，还是浏览器方面的问题？

Answer 1

在我的计算机上，它按预期工作，内存使用建立，直到浏览器决定运行垃圾收集器，此时内存使用下降到基本级别。

您确定内存消耗确实达到了临界水平吗？如果是这样，我将其描述为Chrome中的一个错误，那么你就不应该只是通过提供格式错误的HTML来造成内存泄漏。

Answer 2

伙计，你试图为每次点击添加2000行！这是一个笨重的大表和表非常耗费内存。实际上你从一开始就有2000行，所以单击按钮一次就会生成i 4000。我建议使用某种分页，一次限制文档中的最大行数。不超过2000.如果在添加2000个新的之前删除第一个2000呢？

如果你重新设计你的代码只使用嵌套的div而不是<table><tr>...</tr><table>，那么你的页面会更快一点......但仍然...... 4000多行...它很多...不是很用户友好...滚动......等等......你想要做什么？＃/ p>

动态表内存使用情况

2 个答案: