Webpage Memory Increasing drastically

Question

I have an EmberJs application which uses FlotJS to render charts. In one particular chart, where we draw 50+ bars in a chart, the memory of the web page increases drastically and its not reducing even after moving to other pages. When that chart is rendered some 5+ times the web page crashes. Chrome Task Manager shows following details,

Before rendering chart,
Memory - 259MB
GPU Memory - 63.7MB
Javascript Memory - 22,982K(12,755K live)

After rendering chart,
Memory - 396MB
GPU Memory - 58.2MB
Javascript Memory - 46,233K(29,059K live)

When plot function of FlotJS is commented, there is <1MB increase in the Memory utilisation.

What could be the possible reason?? The Memory value shown by Chrome Task Manager comprises of what?? Is FlotJS introducing any memory leak??

Answer 1

Looking at your code, I can kinda reproduce the memory usage. I had to go to extremes though and essentially do this:

while(true)
{
    $('.flot').empty();
    $.plot(".flot", [JSON.parse(data)] );
}

This caused thousands upon thousands of redraws and chewed up memory.

Emptying the div and re-initing the chart is not the proper way to redraw, however. You should be using a combination of setData, setupGrid and draw. Doing this:

var splot = null;
while(true)
{
    if (splot == null)
    {
        splot = $.plot(".flot", [JSON.parse(data)] );
    }
    else
    {
        splot.setData([JSON.parse(data)]);
        splot.draw();
    }       
}

My memory usage was flat.

Also, your sample code doesn't show how you are using emberJS. I'm not very familiar with it, but I'd check very carefully that in it's data-binding glory it's not forcing the chart to redraw too frequently.