相关疑难解决方法(0)

我注意到浏览器的内存在我处于一种形式时开始增加(这在任务管理器中很明显).在IE 9中,在使用一段时间后,这很容易超过500MB,而chrome则更具弹性(使用相同的测试可达到200MB).

我正在使用chrome开发人员工具来调试此问题.我注意到有大量的Detached DOM树:

我假设这可以确认存在内存泄漏.这是对的吗？其次,我需要找出如何确定问题的根本原因.我知道您应该使用保留树来识别阻止这些物品被回收的原因.但我无法找到如何使用保留树.例如,上面屏幕截图中的保留树是什么意思？

任何帮助将不胜感激.

我正在使用jquery-ui Tabs,我遇到了删除标签时出现的问题.该选项卡似乎与其内容div一起被删除,但当您查看Chrome DevTools配置文件中的堆(删除选项卡后)时,您将看到选项卡li和div元素仍然存在,但已分离.随着时间的推移,重复添加/移除突片导致这些元件累积.例如,如果添加选项卡10次,则会在堆快照中显示10个分离的div元素和10个分离的li元素:

我有以下观点:

TabLabel = Marionette.ItemView.extend({
    template: "#tab-label",
    tagName: "li",
    events: {
        "click .ui-icon-close": "closeTab"
    },  
    closeTab: function(e) {
        this.$el.contents().remove();
        this.model.collection.remove(this.model);
        $("#main-container").tabs("refresh");
        this.close();
    }   
}); 

TabContainer = Marionette.ItemView.extend({
    template: "#tab-container",
    tagName: "div",
    onBeforeRender: function() {
        this.$el.attr("id", "div-" + this.id);
    },  
    onClose: function() {
        // This removes the region that contains the container
        App.layout.removeRegion(this.containerRegion);
    }   
});

TabLabels = Marionette.CollectionView.extend({
    tagName: "ul"
});

TabContainers = Marionette.CollectionView.extend({
    tagName: "div"
});

视图实例化如下:

tabs = new TabsCollection(); // Create a new collection …