javascript - 无论我如何删除 View ，主干都会留下分离的 DOM 元素

Question

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

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);

很多文章都告诉我，使用“remove”和“destroy”可以清除删除 DOM 树时的所有内存泄漏。

但 Chrome 配置文件实用程序却另有说法。无论我做什么，我都会得到分离的 DOM 元素。

更新!!!在回复中尝试了一些东西后，我仍然在谷歌浏览器中得到这个:这是 jsfiddle:http://jsfiddle.net/HUVHX/

Answer 1

taskview 仍然持有对 this.el 的强引用，尽管它没有连接到 dom。这不是内存泄漏，因为 taskview 也被它的变量强烈控制

为了测试我的假设，只需添加:

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

另一种方法是取消定义taskview var

编辑:

当我更改:"click h1": "removeView" 到 "click": "removeView" 它解决了分离的 dom 节点泄漏。

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

你可以在 Backbone 代码中看到，不同之处在于使用选择器调用 jquery on 函数:

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

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