A few weeks ago I delivered a session in AngularConnect conference about profiling Angular apps. As part of the talk, I explained shortly what is a memory leak and what can cause memory leaks in Angular apps (ahhm… I’m looking at you observables…).
Note: Finding memory leaks is a long process that can take some time. Don’t be afraid to walk this path cause the gain, which is app stability, is very high.
My Memory isn’t What It Used to Be
A memory leak is defined as memory that isn’t required by an app, but isn’t returned to the pool of free memory. When there is a severe memory leak in an app, the app will start being sluggish and it’s performance will degrade over time. App crashes can also occur if the app will be out of memory. Most of the time memory leaks are unnoticed and only if you monitor your app regularly you will be able to understand that there is a memory leak. If the app memory consumption is going up during time and never goes down this is indication that you aren’t releasing memory and that you need to investigate what is the cause for this increasing in memory.
- Forgotten timers or callbacks — when you forget to clear an interval you used or you set some callbacks and forgetting to remove them it causes them to stay in memory.
- Out of DOM references — when you remove DOM nodes, but those nodes are still retaining in memory cause there is a reference to them.
- Closures — every closure you create is holding some data in memory and that data is freed only when you dispose the closure which is referencing the data.
Just knowing these options isn’t sufficient, but it can help you later on when you monitor your app and search for leaks.
Monitoring Your Memory Using Chrome DevTools
There are a few ways to monitor your app using Chrome DevTools and we will explore them together. Let’s start with the Performance Tab. In the Performance Tab you can find the memory checkbox in the tab’s header menu:
Once you check the memory checkbox you can record your work in the app during some operations and in the recording output you will be able to see the memory consumption during that time. Here is an example of a recording with all memory data shown in the Chrome DevTools:
Also, another thing to observe in the timeline is when you see spikes in memory consumption. Memory spikes can be caused by an operation that allocates a lot of memory. That doesn’t indicate that you have memory leak but it might indicate that some operation is very costly in terms of memory consumption and that you should investigate why.
Using the Performance Tab can be very helpful but are there any other ways to monitor our app and to find memory leaks? If I’m asking it means that there is. A second option to find memory problems using Chrome DevTools is the Memory Tab.
Let’s start with heap snapshots. The idea is to take a heap snapshot and then take another one after a few minutes of work. Once you have the two snapshots, you can compare them and check the changes between the two. You can drill down into the allocated objects and investigate further more.
In the previous figure you can see how to compare snapshots. After you recorded your snapshots (by pressing the record button), you use the dropdown menu to change your views. In the figure you can see that I chose the Comparison view. Once you choose Comparison you will see a comparison grid with a lot of helpful information. For example, how many new objects were added, how many objects were deleted and what is the allocation size for each kind of object. Each node in the grid can be drilled down and opened to see the references in memory. Using the heap snapshots option is very useful if you want to find out of DOM references and Chrome DevTools will even mark those references in red background.
The Allocation instrumentation on timeline option enables you to run a timeline which monitors the allocations over time. What it means is that you start recording and you work in the app and you can see the allocations in real-time:
Once you stop the recording you get the allocation information that was gathered. You can drill down into objects and investigate further to see the allocations and their information.
I won’t cover Allocation sampling option, but if you have long running monitoring and you want only sampling and approximations this option might be very useful.
Another option that can be very useful is using the Performance monitor. You can open the Performance monitor by opening the Chrome DevTools settings and then using More tools => Performance monitor like in the next figure:
Once you open the monitor you can get real-time data about the performance of your app over short time. The following figure shows the monitor in action:
Chrome Task Manager
Another tool which isn’t related to Chrome DevTools and can help monitoring your app’s memory is the Chrome Task Manager. The Chrome Task Manager is a real time monitor that monitors all the pages that are currently running. One of the things that it can tell you is how much memory a page is currently using. You can run the Chrome Task Manager by going to More Tools and pressing Task manager (or use Shift+Esc in Chrome):
If there are other tools you are using in your memory investigations I’ll be happy to hear about them in the comments.