Question

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

因此我删除了转换，或者用自制的转换函数替换它们，帧速率较慢。不幸的是，删除所有转换不是一种选择，因为这会使可视化不太明显。剩余的过渡是通过增大/减小圆半径而出现和消失的圆圈。

仍然存在内存泄漏，主要是在chrome中可见（基于Windows任务管理器，10分钟内20,000K）。

所以我想知道转换本身是否会导致内存泄漏。为了测试这个，我做了一个jsfiddle（http://jsfiddle.net/qdwyoy7r/7/）来看一个单独的类似转换是否会显示相同的结果。确实如此：在Chrome中运行时，内存每10分钟增加9,500 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开发工具，但它并没有真正帮助我：

时间线显示了内存使用情况的锯齿形状（但随着时间的推移它会下降的值）
堆时间线显示，大多数（数组）和（已编译代码）在对象中增加并且保留了最大的大小。当我展开它们时，它们也包含很多物品，但是探查器中显示的项目对我来说没有意义。
此外，堆时间轴上的峰值（可能由转换引起）随着时间的推移越来越高。
堆快照的大小不会增加很多但是在比较快照之间分配的对象时，我看到相同的（数组）和（编译代码） ...

Answer 1

这似乎与d3.js无关，而与windows上的chrome（38）无关。一直运行小提琴一个多小时，在Windows任务管理器中测量的内存使用量从56M变为133M。在另一个浏览器（例如IE 10）上，同样的小提琴不会上升，但余额大约是37M。

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

1 个答案: