Backbone中的垃圾收集

时间:2013-05-08 14:41:23

标签: javascript backbone.js memory-leaks marionette garbage

*已更新 - 为其中一个视图*

添加了示例代码

这已经讨论过很多次了,我对这个话题已经提出了很多建议,但我还是没有运气。

我的应用程序是基于标签的,即用户在全局搜索框中搜索实体,并选择生成视图/模型的实体,并在新标签下呈现视图。用户可以通过重复上述过程打开多个标签

我面临的问题是每次打开一个新选项卡时我都可以看到浏览器内存消耗增加了大约6 MB(每个选项卡获取和显示的数据最大为60kb)。

不仅如此,当我关闭标签时,我可以看到我的自定义关闭功能(下面复制)被调用该标签下的每个视图但不知何故浏览器内存不会下降。这对我来说意味着垃圾收集不起作用或视图/模型没有正确清理。

任何帮助将不胜感激。

define([
    "hbs!modules/applications/templates/applications",
    "vent"
],
function (tpl, vent) {

    var View = Backbone.Marionette.ItemView.extend({

        className: 'modApplications',

        template: {
            type: 'handlebars',
            template: tpl
        },

        refresh: function(){
            self.$('.body-of-table').css('visibility', 'hidden');
            self.$('.application-panel .spinnerDiv').addClass('loading');
            this.model.fetch().always(function(){
                self.$('.application-panel .spinnerDiv').removeClass('loading');
            });
        },

        initialize: function(){
            this.model.on('change', this.render, this);
            vent.bindTo(vent, 'updateApplications', this.refresh, this);
        },

        onShow: function(){
            var self = this;
            this.$el.on('click', '.action-refresh', function(e) {
                self.refresh();
                e.preventDefault();
            });
        },

        close: function() {
            _.each(this.bindings, function (binding) {
                binding.model.unbind(binding.ev, binding.callback);
            });
            this.bindings = [];
            this.unbind();
            this.off();
            this.model.off('change');
            this.model.unbind('change', this.render, this);
            this.remove();
            delete this.$el;
            delete this.el;
            if(console) console.log("kill : view.applications");
        }

    });

    return View;

});

1 个答案:

答案 0 :(得分:1)

发现问题&修复。

问题在于我使用了一个全局的Marionette.EventAggregator用于所有新选项卡。这被用作选项卡中各个部分之间通信的手段。现在,当一个选项卡关闭时,main.js文件仍然保持对全局通风口的引用,因为其他选项卡仍在使用它。这是关闭选项卡的引用仍然保留的地方,因此视图/模型不是gc'ed。

为了解决这个问题,我为每个标签创建了一个单独的透气孔,并使用该透气孔对象触发该标签内的任何事件。在选项卡关闭操作中,我取消绑定所有事件,并为要关闭的选项卡的通风口分配空引用。

希望这有助于将来。