5

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.

Improve this question

1 Answer 1

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Many thanks. Following your instructions, i managed to identify specific functions. But the values show in shallow and retained seems to be the size of the function itself not the memory allocated at runtime. For example: function buildBinding (a method of a class) has a shallow size of 144 and retained size of 144, same as other functions. But this function allocates some temporary objects like in ` var context = pipes.shift().split("<").map(trimStr); ` I still could not find, for example, how much i would save in memory if i change the implementation to avoid these temporary objects.
@blikblum Is var context = pipes.shift().split("<").map(trimStr); listed on an individual line at output table?
No. It's part of the buildBinding body. Here is the actual code: github.com/blikblum/rivets/blob/svelte/dist/rivets.js#L337
@blikblum Interesting. Curious why the var is not listed at table? Will not provide garbage collection data, though you can use console.time(), console.timeEnd(), console.profile(), console.profileEnd() and console.trace() to check total time of the line to run.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.