Backbone 中的垃圾回收答案

【问题标题】：Garbage collection in BackboneBackbone 中的垃圾回收
【发布时间】：2013-05-02 20:32:17
【问题描述】：

* 更新 - 为其中一个视图添加了示例代码 *

这已经讨论过很多次了，我已经就这个话题提出了很多建议，但我仍然没有任何运气。

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

我面临的问题是每次打开新标签时，我都会看到浏览器内存消耗增加了大约 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;

});

【问题讨论】：

恐怕您向我们展示的代码还不够。 JavaScript 中的内存泄漏很可能是由于未清理的对象引用；尤其是 DOM 节点和 JS 对象之间的交叉引用是脏的。检查您的代码是否有对子对象和方法的引用。还要确保 DOM 元素不会（例如通过事件处理程序）引用匿名函数，也就是闭包。
我更新了帖子并添加了我使用的典型视图结构。请您看一下，看看我是否错过了 View 内的任何清洁工作。
不幸的是，我没有经常使用backbone.js。我不知道它如何处理事件绑定。例如，我不知道解除绑定vent.bindTo(vent, 'updateApplications', this.refresh, this); 的相关性有多大，或者是否只需删除对已绑定单击事件的this.$el 的引用就足够了。此外，您可能错过了在退回 View 后清理它。就像我说的，最有可能泄漏内存的区域包括对象引用，尤其是 DOM 和 JS 之间的交叉引用，例如事件处理程序。虽然 API 应该为您处理这些...

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

【解决方案1】：

找到问题并解决。

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

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

希望这对将来的人有所帮助。

【讨论】：