javascript - nvd3应用程序内存泄漏

我有一个实时更新的 Activity 图表，请参阅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之后，内存消耗看起来“不错”。

但是几分钟后，有人饿了，吃了我的字节...


任何人都知道我在做什么错？

最佳答案

当我处理其他内容时，我让您在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
});

现在，在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

希望这可以帮助!

关于javascript - nvd3应用程序内存泄漏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34419048/