如何检测在 JavaScript 中触发垃圾收集的内存分配？答案

【问题标题】：How to detect the memory allocations that are triggering garbage collection in JavaScript?如何检测在 JavaScript 中触发垃圾收集的内存分配？
【发布时间】：2017-01-18 16:06:48
【问题描述】：

在寻找 JavaScript 库（铆钉）中的性能问题时，我发现垃圾收集在一次运行中发生了 3 到 4 次，占用了大约 15% 的执行时间（使用 Chrome DevTools JS Profile）。

由于垃圾回收的原因，至少有 30 个地方创建了临时函数/对象作为潜在候选对象。

我想知道是否有办法找到负责分配被垃圾回收的内存的函数，这样我就可以专注于我的性能调整。

我记录了堆分配时间线，但它没有区分被垃圾收集的内存并且仍然持有引用（没有像 DevTools doc 中指出的灰色条）

还没有运气记录堆分配配置文件。

【问题讨论】：

标签： javascript memory-management garbage-collection google-chrome-devtools

【解决方案1】：

在Profiles 标签DevTools 选择Record Heap Allocation。包装javascript 应在调用setTimeout() 时进行评估，持续时间设置为足够的时间以在传递给setTimeout 的函数被调用之前单击Start；例如

<!DOCTYPE html>
<html>
<head>
  <script>
    t = 5;
    setTimeout(function() {
      (function test1() {
        var a = 123;
        function abc() {
          return a
        }
        abc();
      }());
    }, 10000)
  </script>
</head>
<body></body>
</html>

当setTimeout 被称为蓝条时，可能会在时间轴上出现一个灰条。点击Ctr+E停止记录堆配置文件。

在时间线图中选择蓝色或灰色条。在默认选项为Summary 的下拉菜单中选择Containment。选择

[1] :: (GC roots) @n

n 是一个数字。

通过单击[1] :: (GC roots) 左侧的三角形来展开选择。选择[1] :: (GC roots) 的一个元素，查看显示的Distance、Shallow Size 和Retained Size 列以进行选择。

要查看特定功能，请滚动到

[2] :: (External strings) @n

到应该列出全局变量和函数调用的位置；例如，"t" 和 "setTimeout" 来自上方 javascrip。检查相应的Distance、Shallow Size 和Retained Size 列以进行选择。

【讨论】：

非常感谢。按照您的指示，我设法确定了特定功能。但是显示在浅层和保留中的值似乎是函数本身的大小，而不是运行时分配的内存。例如：函数 buildBinding（一个类的方法）与其他函数一样，其浅层大小为 144，保留大小为 144。但是这个函数分配了一些临时对象，比如 var context = pipelines.shift().split("
@blikblum var context = pipes.shift().split("<").map(trimStr); 是否列在输出表的单独一行中？
没有。它是 buildBinding 主体的一部分。这是实际代码：github.com/blikblum/rivets/blob/svelte/dist/rivets.js#L337
@blikblum 有趣。好奇为什么var 没有列在表中？不会提供垃圾回收数据，但您可以使用console.time()、console.timeEnd()、console.profile()、console.profileEnd() 和console.trace() 来检查线路运行的总时间。