KineticJS high memory consumption when removing and adding layers

Question

I am building an application where i want to replay the movement of several users (up to 20). Each user has a list of X,Y positions (ranging from 20 to 400 positions). A replay ranges from 1-10 minutes.

The replay is drawn at 8 FPS, which is all i require. At each frame i delete the layer showing the user's movement, and redraw everything up to the next point in time.

This application uses a lot of memory, and if i re-run a replay, the memory consumption keeps increasing (up to 8 gb). I have tried using the Profiler in Google Chrome (version 27), and it seems there is a build-up of layers in memory, even though i constantly remove() the old layers.

The following code shows a quick mockup of what the application does.

function draw()
{
    stage.removeChildren();

    var userLayer = new Kinetic.Layer();

    /*
    iterate all data and create lines to signify the movement of a user,
    and add it to userLayer
    */

    stage.add(userLayer);
}

setInterval(draw, 125); // 8 FPS

My question is, stage.removeChildren() and also Kinetic.Layer().remove(), do they not remove the layer from memory? Or do i need to handle this in an entirely different manner?

Answer 1

Yes. "Remove" is removing from parent container. But object still exists. You have to use "destroy" instead.