Profile cover photo
Profile photo
Xavier CAMBAR
149 followers -
Whether you know me and don't need to read that, or...
Whether you know me and don't need to read that, or...

149 followers
About
Posts

Post has attachment
Add a comment...

Post has shared content
Chasing Leaks With The Chrome DevTools Heap Profiler Views

A friend debugging a web app today asked me what the differences between the Comparison, Dominator, Containment and Summary views in DevTools > Profiles > Heap snapshot were and I thought I’d share my replies.

Quick recap: the heap profiler gives us an overview of all the objects in memory at the time a snapshot is taken. This lets us find out what in our app using memory and is of particular use if you’re interested in improving performance.

Comparison view helps you track down memory leaks, by displaying which objects have been correctly cleaned up by the garbage collector. Generally used to record and compare two (or more) memory snapshots of before and after an operation. The idea is that inspecting the delta in freed memory and reference count lets you confirm the presence and cause of a memory leak.

Dominators view helps confirm that no unexpected references to objects are still hanging around (i.e that they are well contained) and that deletion/garbage collection is actually working.

Summary view helps you hunt down objects (and their memory use) based on type grouped by constructor name. This view is particularly helpful for tracking down DOM leaks.

Containment view provides a better view of object structure, helping us analyze objects referenced in the global namespace (i.e. window) to find out what is keeping them around. It lets you analyze closures and dive into your objects at a low level.
 
I've previously written about improving app performance using Timeline and the heap profiler http://addyosmani.com/blog/performance-optimisation-with-timeline-profiles/ but Peter Reinhardt also wrote about his experience with the heap profiler in more detail last year: http://reinpk.blogspot.co.uk/2012/03/using-heap-profiler-in-chrome-dev-tools.html

#devtools   #chrome  
Photo
Add a comment...

Post has shared content

Post has attachment
Amsterdam
Photo
Add a comment...

Post has shared content

+Thomas Bassetto +Sylvain Zimmer What about a G+ event for +dotJS  ?
Did I miss it ?
Add a comment...

Post has shared content

Post has attachment
#lxjs  schedule. These are gonna be 2 hard-playing hard-working days!

Can't wait to catch my plane to Lisbon!

http://2012.lxjs.org for details
Photo
Add a comment...

Post has attachment
Megabox - Coming soon
Add a comment...

Post has shared content
+Ariya Hidayat on Code Quality Tools. Not only did he write a very excellent and (human) readable parser, he has IMO a clear view on what's available as well as what's missing.

I dare add to the list of the missing quality tools the following:
* Profiling with call graph (see kcachegrind)
* Copy/Paste Detector (CPD) /Project Mess Detector (PMD) (yep, I've been a PHP dev in a previous life!)
* min/max/average execution time on functions/xhr
* I can't remember my last item :-/
Recommended: Slides On Advanced Code Quality Analysis

+Ariya Hidayat's talk from Fluent discusses the development of Esprima - a JavaScript parser designed from the ground-up to be readable, high performant, easily extensible and able to accommodate future ES Harmony features. A recommended talk with lots of good points.

http://www.slideshare.net/ariyahidayat/javascript-parser-infrastructure-for-code-quality-analysis
Photo
Add a comment...
Wait while more posts are being loaded