I made a visualization with the help of d3.js. The visualization makes use of a lot of transitions (e.g. showing/hiding/moving elements). I noticed a high CPU load and a large increase in memory over time, making the visualization very slow after a while.
I therefore removed transitions, or replaced them with a self-made transition function with a slower frame-rate. Unfortunately, removing all transitions is not an option as this would make the visualization less presentable. The remaining transitions are circles that are appearing and disappearing by increasing/decreasing the circle radius.
Still there seemed to be a memory leak, mostly visible in chrome (20,000K in 10 minutes based on the windows task manager).
So I wondered if it could be that the transitions themselves are causing a memory leak. To test this I made a jsfiddle (http://jsfiddle.net/qdwyoy7r/7/) to see whether a single similar transition alone would show the same results. And it does: When run in Chrome, the memory increases around 9,500 K per 10 minutes (based on the windows task manager).
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);
}
Is it possible that the d3 transitions themselves are somehow increasing the memory usage? Or am I using the d3 transitions in a wrong way?
I have been looking at the Chrome dev tools but it is not really helping me:
- the timeline shows the saw-tooth pattern of memory usage (but the value it goes down to increases over time)
- the heap timeline shows that mostly (array) and (compiled code) are increasing in objects and have retained the most size. They also contain a lot of items when I unfold them, but the items shown in the profiler do not make sense to me.
- Also, the spikes on the heap timeline (that are likely caused by the transition), are getting increasingly higher over time.
- the heap snapshots do not increase in size much but when comparing objects allocated between snapshots I see the same (array) and (compiled code)...