Memory Leaks in Music blocks
Definition of a Memory Leak?
A memory leak is what occurs when you allocate memory and forget to free it. In some cases, it is not necessarily a disaster, if we don’t leak too much too often, but there are some cases where this is very serious. Memory leaks cause performance problems, slow down applications and can lead to a process terminating.
Identifying Memory Leaks
Method 1: The Performance Tab
In the Chrome developer tools on the ‘Performance’ select ‘Memory’ and hit ‘Record’. I sstart using the application. After i am done, stop recording. Then a graph of memory usage shows
A brief explanation of the graph
- Their is used js heap in blue. Used is important here — Chrome is telling us that there may be more heap usage than shown in its actual process, but what we are seeing here is what is actually used by the page.
- We see documents
- We see DOM nodes. As I use the app the nodes increase, up until a certain point and then they drop.
- We see Listeners (i.e. even handlers). Again, these increase as I use the app
Method 2: Heap Snapshots
This is a method of identifying memory leaks is finely controlled. We will take snapshots at specific points in time and analyse the differences between them. To take a snapshot, we go to the memory tab and choose ‘Take Heap Snapshot’:.
When we take a heap snapshot Chrome simply records the details of all memory allocated. Taking a Snapshot always runs garbage collection first.A heap snapshot shows you exactly the same kind of data you get in the Allocation Sampling except that you are seeing ALL memory in use, not just objects which were allocated and are still alive. Taking a snapshot we first navigate the app before taking a snapshot.
Starting from the left we have the ‘Constructor’ column. This is the type of object we have.
- (compiled code): Represents JavaScript code compiled by Chrome. Consider this internal — we have no control over it.
- (array): Internally used array object. Again, internal.
- Array: A JavaScript array. Often we have a lot of data in arrays.
- Object: A plain old JavaScript object.
- (closure): A closure.
- system / Context: The underlying data require to call a function, for example the actual data used by a closure.
- system: Internally used data.
Ths screenshot shows some places that could probably cause a leak
