Javascript 无论我如何删除视图，主干都会保留分离的DOM元素

我正在努力理解单页应用程序的内存管理概念。这是我的代码：

var FilterModel = Backbone.Model.extend({});
    var taskView = Backbone.View.extend({
        template: _.template('<h1><%= title %></h1>'),
        initialize: function(){
            this.render();
            this.listenTo(this.model, 'destroy', this.remove);
            console.log(this.model)
        },
        render: function(){

            this.$el.html(this.template(this.model.toJSON()));
            return this;
        },
        events:{
            'click h1': 'removeView'

        },
        removeView: function(){
            this.model.destroy();
            console.log('removed');

        }
    });
    var filterModel = new FilterModel({title: 'Test'});
    var taskview = new taskView({model:filterModel});

// I make heap snapshot before and after the change!
    setTimeout(function(){
        $("h1").click()}, 3000
    )
    $('body').append(taskview.$el);

var FilterModel=Backbone.Model.extend（{}）；
var taskView=Backbone.View.extend({
模板：u.模板（“”），
初始化：函数（）{
这个。render（）；
this.listenTo（this.model，'destroy'，this.remove）；
console.log（this.model）
},
render:function（）{
this.el.html（this.template（this.model.toJSON（））；
归还这个；
},
活动：{
“单击h1”：“移除视图”
},
removeView:函数（）{
this.model.destroy（）；
console.log（'removed'）；
}
});
var filterModel=新的filterModel（{title:'Test'}）；
var taskview=new taskview（{model:filterModel}）；
//我在更改前后制作堆快照！
setTimeout（函数（）{
$（“h1”）。单击（）}，3000
)
$（'body'）.append（taskview.$el）；

许多文章告诉我，在删除DOM树时，使用“remove”和“destroy”可以清除任何内存泄漏

但Chrome profile实用程序则不然。无论我做什么，我都会分离DOM元素

更新 在回答中尝试了一些东西后，我在谷歌Chrome中仍然可以看到： 以下是JSFIDLE：

---

因此，詹克，你可以在这里找到你的答案：

问题在于，您需要做的不仅仅是删除模型和视图

当您试图关闭视图时，您需要正确地销毁所有挂起的事件和其他绑定

我不知道您是否了解marionete.js（Backbone.marionete），但它是主干网的一个很好的扩展，可以处理这个僵尸视图，并创建健壮的js应用程序

你也可以阅读一些关于这方面的文章，它们是在我发布的Stackoverflow链接中指出的

---

但是逻辑是这样的：如果视图正在侦听模型，则也会发生相反的情况，因此您将始终在DOM中获得视图的实例

taskview仍然保留对this.el的强引用，尽管它未连接到DOM。这不是内存泄漏，因为taskview也被其变量牢牢控制

要测试我的假设，只需添加：

removeView: function(){
  this.model.destroy();
  this.el = undefined;
  this.$el = undefined;
}

另一种方法是取消taskview变量的定义

编辑：

当我将：

“click h1”：“removeView”

更改为

“click”：“removeView”

时，它解决了分离的dom节点泄漏问题

我怀疑这与jquery选择器缓存有关

您可以在主干代码中看到，区别在于使用选择器调用jquery

on

函数：

if (selector === '') {
   this.$el.on(eventName, method);
} else {
  this.$el.on(eventName, selector, method);
}

---

我试图将缓存深入jquery代码，但没有成功

谢谢你的回复。我听说过木偶，但我不确定重新设计我的应用需要多少努力。我可以看出，没有快速的解决办法，我必须采取不同的办法。你能告诉我我在原始问题中发布的代码吗？我也尝试过在模型和视图上使用“stopListening（）”，但没有成功。我尝试过这个，但仍然得到了相同的结果。（我用截图更新了我的原始帖子）@Janck-你能在JSFIDLE上发布这段代码吗，这样我们可以更深入地了解一下这很有趣，我尝试关闭jQuery缓存，但得到了相同的结果，我还教过开发工具将所有jQuery缓存元素描述为jQuery sizzle。无论如何…我终于成功了，我很快就会发布代码，但我认为这也与浏览器缓存有关。现在我正在用木偶重新构建代码，因为它似乎是最好的选择。谢谢你的支持input@Janck在我看来，木偶确实是最好的选择。我认为它不会解决这种内存泄漏。。。但是，它将使您免于编写大量样板代码，祝您好运。你能找到真正的漏洞吗？首先。。我也使用木偶的每一个骨干项目，我正在做，这是伟大的。据我所知，这不是真正的内存泄漏，而是某种缓存机制，我无法真正跟踪…@moo，我不确定你指的是什么？@muistooshort注意到他正在调用

This.model.destroy（）

，视图正在侦听触发默认

视图的destroy事件#remove

method@ekeren：对，谢谢，我没看到。