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