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

How to detect the memory allocations that are triggering garbage collection in JavaScript?

本文关键字:分配 内存 何检测 检测 JavaScript      更新时间:2023-09-26

在寻找JavaScript库(铆钉)的性能问题时,我发现垃圾收集在一次运行中发生三到四次,占用约15%的执行时间(使用Chrome DevTools JS Profile)。

由于垃圾收集的原因,至少有30个地方创建了临时函数/对象。

我想知道是否有一种方法可以找到哪些函数负责被垃圾收集的内存分配,这样我就可以集中我的性能调优。

我记录了堆分配时间线,但它没有区分被垃圾收集的内存,并且仍然保持引用(没有灰色条在DevTools文档中指向)

还记录了堆分配配置文件。

At Profiles tab At DevTools select 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停止记录堆配置文件。

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

[1] :: (GC roots) @n

其中n为数字。

点击[1] :: (GC roots)左边的三角形展开选区。选择[1] :: (GC roots)中的一个元素,查看显示的DistanceShallow SizeRetained Size列。

查看特定功能,滚动到

[2] :: (External strings) @n

指向应该列出全局变量和函数调用的位置;例如,"t""setTimeout"来自javascrip之上。检查对应的DistanceShallow SizeRetained Size列的选择