Javascript + Knockout.js 内存泄漏 - 如何确保对象被销毁？

Question

我正在使用google's 3 Snapshot method 来查找页面上的内存泄漏。 页面在 Knockout.js 和 Jquery Mobile UI 上运行。 我已经缩小到内存泄漏的 div 之一。在每个快照之间，我正在运行此脚本以清除内存泄漏对象。

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

.paddedContentContainer 是泄漏对象的父级。
现在有趣的部分是我仍然可以在保留对象树中看到对象。在下面的屏幕截图中，您可以看到我正在过滤从快照 1 和 2 中保留的快照 3 中的对象，并且通过文本可以看到来自控制台的$0 在屏幕上的同一对象中（事件销售订单和... .)。

我假设 .off(); 和 .remove(); 不足以收集对象。
如何永久销毁对该对象的所有引用？

Answer 1

你看过这个帖子吗：How to destroy a DOM element with jQuery?？

卢克的回答似乎很有趣：

如果你想彻底摧毁目标，你有几个 选项。首先，您可以按照描述从 DOM 中删除对象 以上...

console.log($target); // jQuery 对象 $target.remove(); // 从 DOM 中删除目标 console.log($target); // $target 仍然 存在选项 1 - 然后用空的 jQuery 对象替换目标 (jQuery 1.4+)

$目标 = $();控制台.log($target); // 空的 jQuery 对象 选项 2 - 或者完全删除该属性（如果您在其他地方引用它会导致错误）

删除$目标；控制台.log($target); // 错误：$target 不是 定义

也许你应该最后delete $(item)。

Answer 2

.remove() 只是从 DOM 中删除该元素，如果有任何东西仍在引用它（在您的代码中），它将不会被垃圾收集。

编辑

是的，.remove() 是从 DOM 中分离/删除它的正确方法，但它仍然保存在内存中，因为其他东西正在引用它（在本例中是淘汰赛的内部结构）。

一种方法，也是我这样做的方法，是保留我在控件中创建的所有高级 DOM 元素的集合，然后有一个销毁函数循环这些元素并在它们上调用 .remove() 并分配他们给null

例如（注意这是保存在每个控制对象中（没有泄漏的全局内容）：

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


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

您可以通过淘汰赛采取这种方法。

Answer 3

仅为那些对knockout.js 引用删除感到满意的人添加答案。 这从对象树中删除了手边的<div>。

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