angular js ui grid memory leak issue

Question

I am working on an application that uses angular js UI grid. But as and when I keep using my application, it keeps adding up to the memory without releasing the dom objects.

I have created a sample application where I am able to recreate the same issue of memory leak. I have kept a button("Open slider") in one div, on click of which I am dynamically loading another div that contains UI grid with some data. There is another button("Close Slider") in the other div, on click of which I am able to hide the UI grid.

Following are the screen shots which we observed while investigating the issue on IE browser:

Screen shot showing memory usage when I click on Open slider button to show up the UI grid

Screen show showing no memory released when I click on Close slider button to hide UI grid

So, as you can see in image 2, that when I close the UI grid div, memory is not being released (as shown in developer options > memory tab). So, Is there any way to release the memory once I unload the UI grid or any other way to remove the de-attached dom objects?

You can find the plunker of above application in the comments section.

Answer 1

The best way to handle memory management in angular js is to make use of “Controller as” syntax.

Using alias for controllers releases DOM elements from the memory once the controller is unloaded.

Answer 2

I tried your plunker profiling with Chrome Dev Tools and I have to say I found no evidence of memory leaks.

Here you can see I tried performing many opening and closing of the grid and in the end memory got released.

Furthermore I tried another one asking Chrome to perform GC before and after every click and I got this:

Here you can see that after every cycle, when I ask for GC, there is just a little amount of memory not released but it doesn't seem to grow over time.