我有一个使用 Marionette 和 requirejs 编写的仪表板 Web 应用程序。在这个应用程序中，我使用谷歌可视化 api 来生成我的图表。在开始开发一段时间后，我注意到我有内存泄漏。在 Chrome Canary 的任务管理器中，我可以看到随着图表的绘制和删除而内存增加。我从来没有看到内存减少，它只会增加。我拍了一些堆快照，发现我有很多分离的 dom 树，都指的是 svg 元素和其他生成的图表。
现在，我的其余视图和子视图正在被木偶的固有方法清理，唯一剩下的就是这些图表分离的dom元素。
我尝试在包含图表的视图的 onClose 方法中实现一些清理代码：
- google 的 clearChart 方法
- html 节点上的 jquery empty() 和 remove()
- javascript的删除功能
随着分离的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;
});
并且图表实例被初始化并显示在 marionette.layout 区域中，如下所示：
self.visitsChart.show(new MallKPIChart({
title: 'SHOPPING CENTRE VISITS',
data: self.mallKPI.get('captures'),
range: self.range
}));
这是包含 svg 分离元素的堆快照的屏幕截图（当我不断关闭和打开视图时，快照的大小会增加）
