nvd3 应用程序内存泄漏
nvd3 application memory leak
我有一个经常更新的活线图,请参阅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 与 "Development Tools" "Total memory" 先略微增加,但几分钟后它开始快速增长。
启动 jsfiddle 后内存消耗看起来 'good'...
但是几分钟后有人饿了,吃了我的字节...
有人知道我做错了什么吗?
我让你 fiddle 运行 在其中一个 chrome 选项卡上停留了 30 分钟,而我正在处理其他事情,但它崩溃了。
但是,如果我保持选项卡打开,这样选项卡就不会失去焦点,它就不会崩溃,并且会继续无缝工作。
因此,我假设NVD3不会更新图形,而是将所有更新在集合处处于模糊状态时将所有更新保留在集合中,这就是内存不断增加的原因。现在,当焦点回到选项卡上时,它会尝试呈现所有更新和屏幕冻结并最终崩溃。
现在作为修复:
我正在使用 JQUERY 检测焦点上的 window:
$(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
中仅当 window 处于焦点时才更新图表:
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
希望对您有所帮助!
好像是NVD3或者D3本身的bug。我现在的解决方法是每 10 分钟用图表重新加载页面。
var startDateNVD3Reload = Date.now();
...
var elapsed_time_minutes = (Date.now() - startDateNVD3Reload)/1000/60;
if (elapsed_time_minutes > 10)
{
location.reload(true);
}
我有一个经常更新的活线图,请参阅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 与 "Development Tools" "Total memory" 先略微增加,但几分钟后它开始快速增长。
启动 jsfiddle 后内存消耗看起来 'good'...
有人知道我做错了什么吗?
我让你 fiddle 运行 在其中一个 chrome 选项卡上停留了 30 分钟,而我正在处理其他事情,但它崩溃了。
但是,如果我保持选项卡打开,这样选项卡就不会失去焦点,它就不会崩溃,并且会继续无缝工作。
因此,我假设NVD3不会更新图形,而是将所有更新在集合处处于模糊状态时将所有更新保留在集合中,这就是内存不断增加的原因。现在,当焦点回到选项卡上时,它会尝试呈现所有更新和屏幕冻结并最终崩溃。
现在作为修复:
我正在使用 JQUERY 检测焦点上的 window:
$(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
中仅当 window 处于焦点时才更新图表:
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
希望对您有所帮助!
好像是NVD3或者D3本身的bug。我现在的解决方法是每 10 分钟用图表重新加载页面。
var startDateNVD3Reload = Date.now();
...
var elapsed_time_minutes = (Date.now() - startDateNVD3Reload)/1000/60;
if (elapsed_time_minutes > 10)
{
location.reload(true);
}