javascript - nvd3 应用程序内存泄漏

Question

我有一个经常更新的活线图，请参阅 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 后，内存消耗看起来“不错”... 但几分钟后有人饿了，吃了我的字节......

有人知道我做错了什么吗？

Answer 1

我让你在一个 chrome 选项卡上运行了 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
});

现在在您的重绘函数中，仅当窗口处于焦点时才更新图表:

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

希望这对您有所帮助!