个人中心
gpt4 book ai didi

javascript - 在 Chrome 的 DevTools 中检测泄漏的 DOM 节点

转载 作者：行者123 更新时间：2023-11-29 18:14:48 26 4
gpt4 key购买 nike

我正在尝试使用 Chrome 开发工具来分析我的应用程序的内存使用情况并检测泄漏的 DOM 节点，但我对看到的某些行为感到困惑。根据Chrome profiling docs ，如果我创建 DOM 节点然后正确地释放它们，该工具应该响应一个重置为基线的“节点”计数器:

But if the sequence of actions is not expected to result in any retained memory, and the DOM node count does not drop down back to the baseline where you began, you have good reason to suspect there is a leak.

方法:我使用了 "Leaking DOM Nodes" example. 的变体, 修改为在节点内创建大字符串。

<html>
<head>
  <script>
  var leakedNodes = [];

  var largeStr = new Array(1000000).join('x');

  function createNode(text) {
    var div = document.createElement("div"),
      innerDiv = document.createElement("div"),
      textNode = document.createTextNode(text + " - " + new Date().toTimeString() + "-" + largeStr);
    innerDiv.appendChild(textNode);
    div.appendChild(innerDiv);
    return div;
  }

  function createLeakedNodes() {
    var i;
    for (i = 0; i < 200; i++) {
      leakedNodes.push(createNode("Leaked:" + i));
    }
  }

  function createGCNodes() {
    var i;
    for (i = 0; i < 200; i++) {
      createNode("Collected:" + i);
    }
  }

  function createNodes() {
    createLeakedNodes();
    createGCNodes();
  }

  function clearLeaks() {
    leakedNodes = null;
  }
  </script>
</head>

<body>
  <button onclick="createNodes()">Create</button>
  <button onclick="clearLeaks()">Clear Leaks</button>
</body>

</html>

我在未启用扩展程序的隐身选项卡中启动页面，启动开发工具，然后启动时间线。我按了三次“创建”按钮，然后按了一次“清除泄漏”按钮，然后单击分析器中的“收集垃圾”按钮强制执行 GC，等待 GC 完成，然后停止时间线。

我查看了分析器中的“节点”计数器，并希望看到它在我每次按下“创建”按钮时都会上升，然后在我单击“清除泄漏”按钮之后或之后下降我强制GC。然而，我看到的是图表在攀升，但从未下降。

Screenshot of Nodes counter

是我对图表行为的理解不正确，还是节点没有被合法地释放？如果是后者，上面的什么代码导致了泄漏，为什么关联的内存显然是预期的 GCd？

最佳答案

如果您释放对数组的引用，似乎不会破坏对 DOM 节点的引用。但是，如果您将数组的长度设置为零，则数组中的所有元素都将被丢弃(因此对 DOM 元素的所有引用)，然后垃圾收集器可以完成它的工作并释放内存。

function clearLeaks() {
    leakedNodes.length = 0;
  }

我通过做一些研究并使用您的示例代码得到了这个结果:)。

关于javascript - 在 Chrome 的 DevTools 中检测泄漏的 DOM 节点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24152853/

26 4 0
文章推荐： Android:setVisibility(View.GONE) 减小 webview 上的字体大小和图像大小
文章推荐： android - 单体机器人 : Iterate over the controls in an Activity?
文章推荐： android - 使用 android 中的 DOM 解析器解析存储在内部存储器中的 XML 文件。
文章推荐： c# - 如何过滤数据表？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com