nvd3应用程序内存泄漏

时间:2015-12-22 15:21:37

标签: javascript d3.js memory-leaks nvd3.js

我的生活线图经常更新,请参阅http://jsfiddle.net/cddw17fg/5/

function redraw() {
  if (!redraw.isGraphShown) {
    redraw.isGraphShown = true;
    ...
  } else {
    d3.select('#chart svg')
      .datum(data)
      .transition().duration(1500)
      .call(chart);

    d3.select('.nv-x.nv-axis > g').selectAll('g').selectAll('text')
      .attr('transform', function(d, i, j) {
      return 'translate (-40, 40) rotate(315)'
    });
    nv.tooltip.cleanup();
    chart.update();
  }
}

使用"开发工具"在IE11中运行此js "总记忆"首先略有增加,但几分钟后它开始快速增长。

启动jsfiddle后,内存消耗看起来很好...... after startup 但几分钟后有人饿了,吃了我的字节...... starting to eat memory

任何人都知道我做错了什么?

2 个答案:

答案 0 :(得分:1)

我让你在其中一个镀铬标签上运行了30分钟,而我在其他地方工作并且坠毁了。

但是,如果我保持标签打开,使标签永远不会失去焦点,它永远不会崩溃,并且它会继续无缝地工作。

因此,我假设nvd3不会更新图形,但是当标签处于模糊状态时,会将所有更新保留在集合中,这就是内存持续增加的原因。现在,当焦点重新出现在选项卡上时,它会尝试渲染所有更新和屏幕冻结并最终崩溃。

现在作为修复:

我正在使用JQUERY来检测焦点上的窗口:

$(window).focus(function() {
    window_focus = true;//set this flag on
}).blur(function() {
    window_focus = false;//set this flag off as window is not in display
});

现在,只有当窗口处于焦点时,redraw function才能更新图表

if(window_focus){
            chart.update();
            d3.select('#chart svg')
                .datum(data)
                //.transition().duration(1500)
                .call(chart);

            d3.select('.nv-x.nv-axis > g').selectAll('g').selectAll('text')
                .attr('transform', function(d, i, j) {
                    return 'translate (-40, 40) rotate(315)'
                });
            nv.tooltip.cleanup();

        }

工作代码here

希望这有帮助!

答案 1 :(得分:0)

这似乎是NVD3或D3本身的一个错误。我现在的解决方法是每10分钟用图表重新加载页面。

var startDateNVD3Reload = Date.now();
...
var elapsed_time_minutes = (Date.now() - startDateNVD3Reload)/1000/60;
if (elapsed_time_minutes > 10)
{
    location.reload(true);
}