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:
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.
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.