Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

While looking for performance issues in a JavaScript library (rivets), i found that garbage collection occurs three to four times in a run, taking ~15% of execution time (using Chrome DevTools JS Profile).

There are at least 30 places where temporary functions / objects are created being potential candidates for the reason of the garbage collection.

I'd like to know if there's a way to find what functions are responsible for the allocation of the memory being garbage collected, so i can focus my performance tuning.

I recorded Heap Allocation TimeLine but it does not differentiate memory that was garbage collected and that still holds a reference (there's no gray bar as pointed in DevTools doc)

Also recorded Heap Allocation Profile without luck.

like image 738
blikblum Avatar asked Nov 08 '22 09:11

blikblum


1 Answers

At Profiles tab at DevTools select Record Heap Allocation. Wrap javascript which should be evaluated within a call to setTimeout() with a duration set to enough time to click Start before function passed to setTimeout is called; for example

<!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>

When setTimeout is called a blue bar, possibly followed by a gray bar should appear at timeline. Click Ctr+E to stop recording heap profile.

Select blue or gray bar at timeline graph. Select Containment at dropdown menu where default option is Summary. Select

[1] :: (GC roots) @n

where n is a number.

Expand the selection by clicking triangle to left of [1] :: (GC roots). Select an element of [1] :: (GC roots), review the displayed Distance, Shallow Size, and Retained Size columns for the selection.

To check specific functions, scroll to

[2] :: (External strings) @n

to where global variables and function calls should be listed; i.e.g., "t" and "setTimeout" from above javascrip. Check corresponding Distance, Shallow Size, and Retained Size columns for the selection.

like image 172
guest271314 Avatar answered Nov 14 '22 21:11

guest271314