使用带有 ajax 的 google 图表出现内存泄漏

2023-12-26

我对 javascript 相当陌生,并且在某些代码中找不到内存泄漏,这些代码每秒使用 ajax 数据更新 google 图表。

我的代码(简化为一个小测试用例):

function TimeLine(id, max) {
    this.chart = new google.visualization.LineChart(document.getElementById(id));
    this.vals = new google.visualization.DataTable();
    this.vals.addColumn('number', 'Index');

    for (var i = 2; i < arguments.length; i++) {
        this.vals.addColumn('number', arguments[i]);
    }

    this.numCols = arguments.length - 2;
    this.max = max;
    this.index = 0;

    this.resourceOptions = {
        'title': 'Memory allocation',
            'width': 360,
        'height': 300
    };
}

TimeLine.prototype.Add = function () {

    if (this.vals.getNumberOfRows() > this.max) {
        this.vals.removeRow(0);
    }

    var row = [this.index];

    for (var i = 0; i < arguments.length; i++) {
        row.push(arguments[i]);
    }

    this.vals.addRow(row);

    this.chart.draw(this.vals, this.options);

    this.index++;
};

function onLoad() {
    window.Timeline = new TimeLine('gauges', 15, 'Alloc');
    drawCharts();
}

function drawCharts() {
    window.Timeline.Add(window.Timeline.index%3);

    setTimeout(drawCharts, 1000);
}

google.load('visualization', '1.0', {
    'packages': ['corechart']
});

google.setOnLoadCallback(onLoad);

我在 64 位 Ubuntu 上使用 chrome 版本 29.0.1547.62。

我将图表包装在一个对象中(希望)让我更容易推理范围和垃圾收集,因为我不太习惯 JS 范围规则。我见过很多类似的问题,但据我所知,我的代码不应该产生泄漏。使用内存时间线,我可以看到每次调用 drawCharts 时内存都会攀升,并且大部分内存似乎都已被 gc'd,但大约一个小时后,该选项卡的内存已达到 300 MB,并且它会一直攀升,直到选项卡崩溃。目标是能够长时间保持此选项卡作为我们一台服务器上当前负载的监控系统,但目前我只能将其保持几个小时,然后它就会被杀死。

我尝试在配置文件选项卡中使用堆快照,如果我比较几次调用 drawCharts 之前和之后的快照,似乎泄漏的对象是图表本身的 SVG 元素,但我可能错误地解释了这些结果。

我重现了这个问题:

http://jsfiddle.net/dv5nK/4/ http://jsfiddle.net/dv5nK/4/

大约 20 分钟后,chrome 中的 about:memory 页面将开始显示高内存消耗,大约 150 MB。通过将 setTimeout 缩短至 100 ms,可以更快地看到此效果。

编辑:固定内存使用统计


如果您正在为每次更新构建新图表(使用新的google.visualization.SomeChart())然后当你完成后 前一个实例,您必须调用clearChart()就可以了,否则内存 会积累。 Google Charts 无法判断该图表已 垃圾收集,并且需要显式的clearChart()调用 取消事件处理程序与 DOM 的链接。

source: https://github.com/google/google-visualization-issues/issues/1021 https://github.com/google/google-visualization-issues/issues/1021

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用带有 ajax 的 google 图表出现内存泄漏 的相关文章

随机推荐