Geek Answers Handbook

How to determine memory allocations that trigger garbage collection in JavaScript?

When looking for performance issues in the JavaScript library (rivets), I found that garbage collection occurs three to four times during execution, taking ~ 15% of the execution time (using the JS profile for Chrome DevTools).

There are at least 30 places where temporary functions / objects are created by potential candidates due to garbage collection.

I would like to know if there is a way to find out which functions are responsible for allocating memory collected by garbage, so I can focus the performance tuning.

I recorded a Heap Allocation TimeLine, but it does not distinguish between memory that was garbage collected and which still contains a link (there is no gray bar there, as indicated in the DevTools doc )

Also a recorded heap distribution profile with no luck.

+5
javascript garbage-collection memory-management google-chrome-devtools
source share
1 answer

On the Profiles tab in DevTools select Record Heap Allocation . Wrap javascript to be evaluated when calling setTimeout() with a duration set enough time to click Start before the function passed to setTimeout is called; eg

 <!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, it may be followed by a gray bar. Press Ctr+E to stop heap recording.

Select the blue or gray bar in the timeline graph. Select Containment from the drop-down menu, where the default option is Summary . Select

 [1] :: (GC roots) @n

where n is a number.

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

To test certain functions, highlight

 [2] :: (External strings) @n

Where global variables and function calls should be listed that is, "t" and "setTimeout" on top of javascrip . Check the appropriate Distance , Shallow Size and Retained Size for choices.

+1
source share

More articles:


All Articles