First Look: Explaining Memory Consumption With DevTools Native Memory Profiler

In DevTools, the JavaScript heap profiler is used to uncover memory leaks, however this is actually limited to memory allocated in the V8 heap (i.e the heap for Chrome’s JS engine). What this means if if you have a DOM tree consuming a lot of memory, the JavaScript heap could still remain small and the heap profiler wouldn’t be of much help.

This is one of the reasons we recently introduced the new (experimental) Native memory profiler (see Settings->Experiments to enable under the Profile tab), covered in the Breakpoint Ep 5. It’s there to help better understand how the render process consumes memory which isn’t in the V8 heap. 

Feel a little lost? Don’t worry. We basically want to let you know just how much memory is used by the major components in your app: CSS, DOM, the render tree, fonts, images, JavaScript heap and so on. This is so you can figure out whether you should be optimizing your stylesheets, optimizing DOM structures or image use. 

That’s where we are with the tool right now - it shows the distribution of memory between high-level categories, helping you make informed decisions more easily. This feature is still experimental, but in the future, the team are planning on providing more detailed data for each category to make it clear what can be changed to reduce the memory footprint.

E.g if 2GB has been allocated for your app’s images, you’ll be able to see just how much memory each image takes including it’s encoded data and decoded pixels. You will also be able to see if CSS structures grow big just how your stylesheets might be tweaked to fix this.

To see +Paul Irish  take you through the feature, check out: 
Breakpoint Episode 5: DevTools Grab bag

Note: The screenshot below shows the current state of the tool in Chrome Canary, which we recommend using where possible.

#devtools   #chrome   #memory  
Photo
Shared publiclyView activity