3

我有一个简单的 html/javascript 代码，它将创建一些 DOM，然后将它们删除。

<!DOCTYPE html>
<html>

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  </head>

  <body>
    <button onclick="create()"> Create </button>
    <button onclick="clearContainer()"> Clear </button>

    <div id="container"></div>

  </body>

</html>

<script>
  function create() {
    var c = $("#container");
    for(var i = 0;i<10000; i++){
    c.append("<li>Hellosd fssd f df sdf  f f wef ewf we fwe f wef ewf wef ew few f ewf wf ewf wef </li>");
    }
  }

  function clearContainer() {
    var c = $("#container");
    c.empty();
  }
</script>

会有一个Create按钮和一个Clear按钮。当我单击创建按钮时，它会将 10000li个元素附加到容器 div 中，当我单击清除按钮时，它将删除它们。

当我在chrome上尝试时，chrome进程的初始内存使用量大约为30M，在我点击几次创建按钮后增加到70M，当我点击清除按钮时，它变成了50M。比初始多20M。

然后我在IE8上试了一下，IE进程初始内存使用量大约30M，我只点击一次create按钮后就增长到100M以上，点击clear按钮后就变成了80M。比初始多50M。

代码有内存泄漏吗？如何解决？

4

2 回答 2

7

代码有内存泄漏吗？

不。浏览器只是保留了他们分配的一些内存，以防他们需要重用它，和/或还没有（还）垃圾收集不再引用的对象。因为您已经释放了对列表项元素的所有引用（通过 jQuery 的empty调用），所以要让浏览器真正放开它们。

当然，这个答案假设您调用的 jQuery 函数中没有导致内存泄漏的错误（特别是创建li元素的那个）。这可能是一个合理的假设，当然，即使是受人尊敬的图书馆偶尔也会出现错误。如果 jQuery 的一个常用功能（包括元素构造）在给定版本中存在严重的内存泄漏，那么考虑到使用该库的人数和背后的参与团队，它很可能会在合理的时间内被发现、报告和修复它。

而且我们还假设浏览器在处理 DOM 操作时没有导致内存泄漏的错误，这是一个不太确定的假设。（从历史上看，浏览器 [无论哪种风格] 都会遇到各种内存泄漏问题；我认为没有任何浏览器可以幸免。）

但是，如果您明白我的意思，您的代码中没有泄漏。

于 2013-03-09T15:43:14.313 回答
4

通过在 Chromium/linux 上进行测试，我可靠地重现了您的泄漏：每个创建/清除周期都会使内存增长 5MB 到 10MB，并且该内存似乎没有被释放。

我注意到可以通过稍微改变 clear 函数来替换父元素而不是清空它来避免泄漏：

  function clearContainer() {
    var c = $("#container");
    c.remove();
    $('<ul id="container"></ul>').appendTo(document.body);
  }

使用此代码，内存在每个创建/清除周期后恢复到相同的水平。

我不认为问题出在 jQuery 中，但更可能在浏览器的 DOM 对象中，因为 Firefox 似乎没有同样的问题。

编辑：

通过自动化测试以将其推得更远，我可以看到内存最终减少（我的选项卡超过了大约 150 MB，然后可能会回到 70 MB）。这里管理内存的方式显然是贪婪的，但没有真正的内存泄漏。由于内存消耗可能如此不同，我建议您删除父元素而不是清除它，但这不会防止任何崩溃，因为内存崩溃似乎不太可能。

于 2013-03-09T15:56:12.373 回答