使用带有Ajax的Google图表的内存泄漏 [英] Memory leak using google charts with ajax

问题描述

我对javascript很陌生，在某些代码中发现内存泄漏有麻烦，这些代码每秒都会用ajax数据更新一个Google图表.

I'm fairly new to javascript and I'm having trouble finding a memory leak in some code which updates a google chart each second with ajax data.

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

My code (simplified to a small test case):

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.

I'm using chrome Version 29.0.1547.62 on 64 bit Ubuntu.

我将图表包装在一个对象中(希望)使我更容易推理范围和垃圾回收，因为我不习惯JS范围规则.我已经看到许多关于SO的问题，它们类似，但是据我所知，我的代码不应产生泄漏.使用内存时间轴，我可以看到每次调用drawCharts时内存都在增加，并且大部分内存似乎都是gc'd，但是大约一个小时后，该选项卡的内存已达到300 MB，并且一直保持增长，直到标签崩溃.我们的目标是能够长期保留此选项卡，作为对我们一台服务器上当前负载的监视系统，但是目前，我只能将其保持几个小时才能被杀死.

I wrapped the chart in an object to (hopefully) make it easier for me to reason about scope and garbage collection since I'm not quite used to the JS scoping rules. I've seen many questions on SO which are similar, but as far as I can tell my code shouldn't produce a leak. Using the memory timeline I can see the memory climb each time drawCharts is called and most of that memory seems to be gc'd, but after around an hour I'm up to 300 MB for that tab, and it just keeps climbing until the tab crashes. The goal is to be able to keep this tab up for extended periods as a monitoring system for the current load on one of our servers, but currently I can only keep it up for a few hours before it gets killed.

我尝试在配置文件选项卡中使用堆快照，并且如果在几次调用drawCharts之前和之后比较快照，则似乎泄漏的对象是图表本身中的SVG元素，但可能是我在解释这些结果不正确.

I tried using the heap snapshot in the profile tab, and if I compare the snapshot before and after a few calls to drawCharts it seems like the leaked objects are SVG elements from the chart itself, but it's possible I'm interpreting those results incorrectly.

我已经重现了这个问题:

I've reproduced the problem:

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

大约20分钟后，chrome中的about:memory页面将开始显示大约150 MB的高内存消耗.将setTimeout缩短为100 ms可以更快地看到这种效果.

After about 20 mins, the about:memory page in chrome will start to show high memory consumption around 150 MB for me. This effect can be seen faster by shortening the setTimeout to 100 ms.

固定内存使用情况统计

推荐答案

这是一个已知的错误. issue1

This is a known bug. issue1 issue2

这篇关于使用带有Ajax的Google图表的内存泄漏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！