Backbone.js Google可视化图表分离Dom树

我有一个使用木偶和requirejs编写的仪表板web应用程序。在这个应用程序中，我使用谷歌可视化api生成图表。 在开始开发一段时间后，我注意到我有内存泄漏。在Chrome Canary的任务管理器中，我可以看到随着图表的绘制和删除，内存在增加。我从来没有看到记忆力下降，它只会上升。 我拍摄了一些堆快照，发现我有很多分离的dom树，都引用svg元素和其他生成的图表

现在，我的其余视图和子视图正在被木偶的固有方法清理，剩下的只有这些与图表分离的dom元素

我尝试在包含图表的视图的onClose方法中实现一些清理代码：

• 谷歌的clearChart方法
• html节点上的jquery empty（）和remove（）
• javascript的delete函数

随着分离的dom树不断出现，内存不断增加，这些都没有帮助

有人面对过这个问题吗

编辑

下面是图表视图的源代码

define(['jquery', 'underscore', 'backbone', 'dispatchers/event-dispatcher', 'utils/utils', 'utils/chart-utils', 'goog!visualization,1,packages:[corechart], matchMedia'], function($, _, Backbone, eventDispatcher, utils, chartUtils) {
    'use strict';

    var MallKPIChart = Marionette.ItemView.extend({

        template: _.template('<div></div>'),

        onShow: function() {

            var self = this;
            self.$el.height(self.$el.width() / 2.5);
            var data = self.options.data;
            var range = self.options.range;
            var chartData = new google.visualization.DataTable();
            chartData.addColumn('string', 'date');
            chartData.addColumn('number', 'Visits');
            chartData.addColumn('number', 'Average Visits');

            $.each(data['data'], function(i, object) {

                var row = [utils.timeConverter(parseInt(object['timestamp'], 10) / 1000, range), object['count'], data['average']];
                chartData.addRow(row);
            });

            var titleFontSize, pointSize, lineWidth, fontSize;
            if (window.matchMedia('all and (max-width: 1024px)').matches) {

                titleFontSize = 10;
                pointSize = 1;
                lineWidth = 0.8;
                fontSize = 8;
            } else {

                titleFontSize = 15;
                pointSize = 4;
                lineWidth = 2;
                fontSize = 10;
            }

            var options = {

                title: self.options.title,
                titleTextStyle: {

                    color: '#747474',
                    fontName: '"Open Sans"',
                    fontSize: titleFontSize
                },
                fontSize: fontSize,
                chartArea: {
                    'width': '78%',
                    'height': '58%',
                    'left': '12%'
                },
                colors: ['#E87013'],
                backgroundColor: 'transparent',
                areaOpacity: 0.25,
                animation: {
                    duration: 1000,
                    easing: 'out',
                },
                pointSize: pointSize,
                lineWidth: lineWidth,
                hAxis: {
                    format: 'd/MM/y',
                    textPosition: 'out',
                    baselineColor: '#747474',
                    gridlines: {

                        color: '#efeeed'
                    },
                    textStyle: {

                        color: '#747474'
                    },
                    maxTextLines: 1
                },
                vAxis: {
                    textPosition: 'out',
                    textStyle: {

                        color: '#747474'
                    },
                    baselineColor: '#747474',
                    gridlines: {

                        color: '#efeeed'
                    },
                    maxValue: self.options.max,
                    minValue: 0
                },
                series: {
                    1: {
                        type: 'line',
                        color: '#DE309C',
                        pointSize: 0,
                        lineWidth: lineWidth
                    }
                },
                legend: {

                    position: 'top',
                    alignment: 'end'
                },
                curveType: 'function'
            };

            self.chart = new google.visualization.AreaChart(self.$el[0]);
            self.chart.draw(chartData, options);

            return self;
        },

        onClose: function() {
            var self = this;
            self.chart.clearChart();
            self.chart = null;
        },


    });

    return MallKPIChart;

});

这里是包含svg分离元素的堆快照的屏幕截图（当我不断关闭和打开视图时，快照的大小会增加）

---

该API以前存在内存泄漏问题，因此我对您看到这一点并不感到特别惊讶。提交一份关于它的错误报告，包括尽可能多的细节，最好是一个演示该问题的代码示例。

是否有办法以安全的方式删除这些svg、rect和圆圈元素？我试图手动删除它们，但它们仍然显示为分离的dom元素。我不知道为什么它们在分离后没有被垃圾收集，所以我不知道你应该做些什么来消除泄漏。有没有办法找出它们为什么没有被垃圾收集？你能发布一些示例代码来演示泄漏吗？我想看一看，看看我是否能找到任何具体的东西。我刚刚添加了与图表视图相关的代码。仅供参考，最新的候选版本（加载v1.1而不是v1）包括一些内存泄漏问题的修复。

self.visitsChart.show(new MallKPIChart({

    title: 'SHOPPING CENTRE VISITS',
    data: self.mallKPI.get('captures'),
    range: self.range
}));