Javascript + Knockout.js memory leak - How to make sure object is being destroyed?

Question

I am using google's 3 Snapshot method to find memory leaks on the page. Page is running on Knockout.js and Jquery Mobile UI. I have already narrowed down to one of memory leaking divs. Between each snapshot I am running this script to clear the memory leaking object.

$('.paddedContentContainer').children().each(function(index,item){
console.log(item); 
$(item).off(); 
ko.cleanNode($(item)); 
$(item).remove();
item = null;
});

.paddedContentContainer is parent of leaking object.
Now the interesting part is that I can still see object in retained object tree. In screenshot below you can see I am filtering on objects in Snapshot 3 that are retained from Snapshots 1 and 2, and by text it's visible that $0 from console in same object that is on the screen (Event Sales Order & ....). enter image description here

I am assuming that .off(); and .remove(); isin't enough for object to be collected.
How to destroy all references to this object for good?

Metalstorm · Answer 1 · 2014-05-01T16:32:00.523

1

.remove() just removes the element from the DOM, if anything is still referencing it (in your code) it will not be Garbage Collected.

Edit

Yes the .remove() is the correct way of detaching/removing it from the DOM, but it is still held in memory because other things are referencing it (knockout's internals in this example).

One way, and the way I do it, is to keep a collection of all the high-level DOM elements that I create in my controls, then have a destroy function that loops these and calls .remove() on them and assigns them to null

E.g (Note this is held within each control object (no leaky global stuff):

var elements = 
{
    'table' : $('#some_table'),
    'button' : $('#some_button')
};


function destroy()
{
    for(var key in elements)
    {
        elements[key].remove();
        elements[key] = null;
    }
}

You may be able to take this approach with knockout.

edited May 01 '14 at 16:32

answered May 01 '14 at 14:17

Metalstorm

2,940
3
26
22

how do I find everything that is referencing that element? .off() should remove all event handlers, what about all the other stuff? – Matas Vaitkevicius May 01 '14 at 14:27
Ummm the inspector might have a way of seeing all references? One of the columns / right click? – Metalstorm May 01 '14 at 14:42
Oh absolutely. I already know it's knockout holding it's hands on object (function (){return c++ +d}), I must misphrased myself. How do I get generic mechanism to get rid of all references to any DOM element, there must be a way of detaching element. – Matas Vaitkevicius May 01 '14 at 14:46
Edited my answer with a possible solution. – Metalstorm May 01 '14 at 15:03

score 1 · Answer 2 · edited May 23 '17 at 12:02

1

Have you looked at this post: How to destroy a DOM element with jQuery??

Luke's response seems interesting:

If you want to completely destroy the target, you have a couple of options. First you can remove the object from the DOM as described above...

console.log($target); // jQuery object $target.remove(); // remove target from the DOM console.log($target); // $target still exists Option 1 - Then replace target with an empty jQuery object (jQuery 1.4+)

$target = $(); console.log($target); // empty jQuery object Option 2 - Or delete the property entirely (will cause an error if you reference it elsewhere)

delete $target; console.log($target); // error: $target is not defined

Maybe you should to delete $(item) in the end.

edited May 23 '17 at 12:02

Community

1
1

answered May 01 '14 at 14:54

GôTô

7,974
3
32
43

this is really good example to destroy Javascript object no DOM elements http://snag.gy/bngFD.jpg in screenshot you can see item getting deleted and then myself evaluating it out in console. – Matas Vaitkevicius May 01 '14 at 15:01
I can see you wrote $0 in the console. I'm saying you should try `delete $0` – GôTô May 01 '14 at 15:08
$0 is special command to get data out of Chrome Developer tools when inspecting heap. – Matas Vaitkevicius May 01 '14 at 15:12
What's wrong with trying `delete $(item)`? As Metalstorm said, if the DOM object is still there it is probably because it is still referenced – GôTô May 01 '14 at 15:18
it does not get deleted you can see it in screenshot I have sent you. – Matas Vaitkevicius May 01 '14 at 15:20
I suggested to do it **in the end**, after `$(item).remove();` – GôTô May 01 '14 at 15:25
Remember doing console.log(item) is probably going to hold a reference to the object (so you can inspect it later in the console) – Metalstorm May 01 '14 at 15:50

score 0 · Accepted Answer · edited May 01 '14 at 15:37

0

Adding an answer for those who will be satisfied with knockout.js reference removal only. This removed <div> at hand from object tree.

 $('.paddedContentContainer').children().each(function(index,item){
     $(item).off(); 
     ko.removeNode(item);
     $(item).remove();
     item = null;
 });

edited May 01 '14 at 15:37

MackieeE

11,751
4
39
56

answered May 01 '14 at 15:29

Matas Vaitkevicius

58,075
31
238
265

I think this is wrong, setting item to none wont effect the reference held internally by knockout, have a look at this: http://jsfiddle.net/jy3MK/ – Metalstorm May 01 '14 at 16:18
@Metalstorm nope it certainly does, and clearNode() does not. You are more than welcome to try it yourself. – Matas Vaitkevicius May 01 '14 at 18:44

Javascript + Knockout.js memory leak - How to make sure object is being destroyed?

3 Answers3

Linked