使用d3转换会导致内存泄漏

Using d3 transitions causes memory leak

本文关键字：内存 泄漏 d3 转换 使用      更新时间：2023-09-26

我在d3.js的帮助下进行了可视化。可视化使用了许多转换（例如显示/隐藏/移动元素）。我注意到随着时间的推移，CPU负载很高，内存也大幅增加，这使得一段时间后的可视化非常缓慢。

因此，我删除了过渡，或者用自制的帧速率较慢的过渡函数替换它们。不幸的是，删除所有转换并不是一种选择，因为这会降低可视化效果。其余过渡是通过增加/减少圆半径而出现和消失的圆。

仍然存在内存泄漏，主要在chrome中可见（根据windows任务管理器，10分钟内20000K）。

所以我想知道是否是转换本身导致了内存泄漏。为了测试这个，我做了一个jsfiddle(http://jsfiddle.net/qdwyoy7r/7/)看看单独的一个类似的转变是否会显示出相同的结果。确实如此：当在Chrome中运行时，内存每10分钟增加约9500 K（基于windows任务管理器）。

g_svg = d3.select("#visualization")
    .append("svg")
    .attr("width", 300)
    .attr("height", 300);
circle = g_svg.append("circle")
            .attr("cx", 150)
            .attr("cy", 150)
            .attr("r", 0)
            .style("opacity", 0.3)
            .style("fill", "orange");
resize();
function resize(){
    circle.transition()
        .duration(500)
        .attr("r", 100)
        .transition()
        .delay(750)
        .duration(500)
        .attr("r", 0)
    var t = setTimeout(function(){resize()}, 1500);
}

是否有可能d3转换本身以某种方式增加了内存使用量？还是我使用d3转换的方式不对

我一直在看Chrome开发工具，但它对我没有真正的帮助：

  • 时间线显示了记忆使用的锯齿形模式（但它下降到的值会随着时间的推移而增加）
  • 堆时间线显示，（数组）和（编译代码）
  • 此外，堆时间线上的峰值（可能是由转换引起的）随着时间的推移越来越高
  • 堆快照的大小不会增加太多，但当比较快照之间分配的对象时，我会看到相同的（数组）和

这似乎与d3.js无关，而是与windows上的chrome（38）有关。已经运行了一个多小时，在windows任务管理器中测量的内存使用量已经从56M增加到133M。在另一个浏览器（例如IE 10）上，同样的小提琴不会上升，但平衡在3700万左右。

相关文章：