Fatal编程技术网

这是Javascript内存泄漏吗？

javascript jquery html memory memory-leaks

这是Javascript内存泄漏吗？,javascript,jquery,html,memory,memory-leaks,Javascript,Jquery,Html,Memory,Memory Leaks,我已经在Chrome开发者工具中分析了我的web应用程序，并提出了上面所示的时间表。我正在创建和删除悬停函数中的元素。我在报纸上读到过这方面的消息 此模式是否表示内存泄漏？在内部地面军事系统上，节点数（绿线）持续上升，而不是下降。但在我的强制GC上下降到零。这是常见的行为吗 我的意思是，它在内存中保存了很多节点，即使它们不存在。如果我检查堆，没有对DOM节点的引用（没有分离的DOM等），这让我认为这不是内存泄漏 你的五美分是多少 代码如下： $(document).on("mouseenter"

我已经在Chrome开发者工具中分析了我的web应用程序，并提出了上面所示的时间表。我正在创建和删除悬停函数中的元素。我在报纸上读到过这方面的消息

此模式是否表示内存泄漏？在内部地面军事系统上，节点数（绿线）持续上升，而不是下降。但在我的强制GC上下降到零。这是常见的行为吗

我的意思是，它在内存中保存了很多节点，即使它们不存在。如果我检查堆，没有对DOM节点的引用（没有分离的DOM等），这让我认为这不是内存泄漏

你的五美分是多少

代码如下：

$(document).on("mouseenter", ".btn", function(e){
    var el = document.createElement("div");
    el.id = "box";
    document.body.appendChild(el);
});
$(document).on("mouseleave", ".btn", function(e){
    $("#box").remove();
});
对此不是100%确定，但我认为问题可能是您的mouseenter/mouseleave事件未解除绑定？

对此不是100%确定，但我认为问题可能是您的mouseenter/mouseleave事件未解除绑定？

好的，让我们尝试面对这个问题

可能性：

<html>
<div class="ourDiv"></div>
</html>

$(".ourDiv").append(document.createElement("span"))
            .remove();
Javascript内存管理是如何工作的？这一切都取决于可达性：

  • 假定一组可分辨的对象是可访问的：它们是 被称为根。通常，这些包括所有对象 从调用堆栈中的任何位置引用（即，所有本地 当前正在调用的函数中的变量和参数）， 和任何全局变量
  • 对象在运行时保存在内存中 可通过引用或引用链从根访问

    • 所以基本上，当对象不可访问时，JS会将其从内存中删除。让我们尝试一个例子：

    HTML:

    <html>
<div class="ourDiv"></div>
</html>

    $(".ourDiv").append(document.createElement("span"))
            .remove();
    在这个示例中，我故意使用class而不是ID，您将看到原因。我们的记忆是这样的：

  • 我们在内存中有html、body和div标记
  • 我们将span追加到我们的div中，因此我们在内存中有html、body、div和span标记
  • 删除我们的div之后，span元素是不可访问的，所以在内存中我们有：html和body标记
    • 让我们将其修改为更类似于您的代码：

    JS:

    现在怎么样

    元素#id是一个例外。它像我们一样容易接近，所以 留在记忆中。当然，如果您检查它的parentNode，它将是 空

  • 我们在内存中有html、body和div标记
  • 我们将带有ID的span附加到我们的div，因此我们在内存中有html、body、div和span标记
  • 删除我们的div之后，span元素仍然是可访问的，因为它设置了ID，所以在内存中我们有：html、body和span
    • 结论：

    <html>
<div class="ourDiv"></div>
</html>

    $(".ourDiv").append(document.createElement("span"))
            .remove();
    当您为每个创建的元素设置ID时，javascript将在内存中保存它，即使您尝试使用jQuery调用删除它们。可能是因为混合了创建元素和本机API，并在jQuery中删除了它。尝试检查您的
    $.cache
    大小-如果太大，则表示jQuery没有正确删除对象

    但首先，避免对不断创建的元素使用ID应该会有所帮助

    更多解释见：，

    好的，让我们试着面对这个问题

    可能性：

    <html>
<div class="ourDiv"></div>
</html>

    $(".ourDiv").append(document.createElement("span"))
            .remove();
    Javascript内存管理是如何工作的？这一切都取决于可达性：

  • 假定一组可分辨的对象是可访问的：它们是 被称为根。通常，这些包括所有对象 从调用堆栈中的任何位置引用（即，所有本地 当前正在调用的函数中的变量和参数）， 和任何全局变量
  • 对象在运行时保存在内存中 可通过引用或引用链从根访问

    • 所以基本上，当对象不可访问时，JS会将其从内存中删除。让我们尝试一个例子：

    HTML:

    <html>
<div class="ourDiv"></div>
</html>

    $(".ourDiv").append(document.createElement("span"))
            .remove();
    在这个示例中，我故意使用class而不是ID，您将看到原因。我们的记忆是这样的：

  • 我们在内存中有html、body和div标记
  • 我们将span追加到我们的div中，因此我们在内存中有html、body、div和span标记
  • 删除我们的div之后，span元素是不可访问的，所以在内存中我们有：html和body标记
    • 让我们将其修改为更类似于您的代码：

    JS:

    现在怎么样

    元素#id是一个例外。它像我们一样容易接近，所以 留在记忆中。当然，如果您检查它的parentNode，它将是 空

  • 我们在内存中有html、body和div标记
  • 我们将带有ID的span附加到我们的div，因此我们在内存中有html、body、div和span标记
  • 删除我们的div之后，span元素仍然是可访问的，因为它设置了ID，所以在内存中我们有：html、body和span
    • 结论：

    <html>
<div class="ourDiv"></div>
</html>

    $(".ourDiv").append(document.createElement("span"))
            .remove();
    当您为每个创建的元素设置ID时，javascript将在内存中保存它，即使您尝试使用jQuery调用删除它们。可能是因为混合了创建元素和本机API，并在jQuery中删除了它。尝试检查您的
    $.cache
    大小-如果太大，则表示jQuery没有正确删除对象

    但首先，避免对不断创建的元素使用ID应该会有所帮助

    更多解释请参见：，

    我没有在您从Chrome显示的跟踪中看到内存泄漏。您缺少的信息是当垃圾收集周期开始时，该周期可能会部分收集垃圾。让我解释一下

    我不熟悉v8中的垃圾收集器，但在过去的不同时间我都在研究垃圾收集器。垃圾收集是快速释放未使用内存和应用程序响应之间的平衡。特别是在交互式应用程序中，您不希望长时间暂停执行以允许