Extreme slow down using jquery-ui methods after page has been open for some time

Question

So my webpage uses a lot of jquery everywhere, It is a single page javascript application and I pretty much create all the HTML by hand using jquery. I have a lot of divs in which I use draggable and resizable I also use jquery-ui-effects .hide and .show with slide animation to move some divs around.

When I start the application everything works flawlessly but after 10~15 min that the page has been open everything that uses jquery-ui methods gets so slow that it's unusable. When I try to resize one of my divs there is a major slow down when I first mousedown on the corner and after I let go of the click it takes some seconds for the page to become responsive again. Same is true for drag and drop. Calling $().draggable and $().resizable on the divs also takes a lot of time. Strangely the dragging and resizing itself is not slow, only starting/ending it. The longer the page has been open the slower it gets.

All other functionality in the page works just fine even after one hour of the page being open (I even have some basic canvas drawing in place, other jquery but not jquery-ui functionality also works ok). There is no aparent memory leak since the browser never goes over 150mb of memory used.

Some people might say that the problem are my start/stop resize/drag functions. It's not that because I tried to remove them without any change in speed and also it would not explain the slow down on the animations.

CPU use goes to 100% (I'm using a single core system) when animating, it stays at 0% when not using jquery-ui functions. When profiling the animation function (after the page being open for more than 30 min) I see that there is a method named curCSS (jquery-1.8.1.js line 6672) using 95% of the CPU time. This same function only uses 4.5% if I execute the animation a few seconds after starting the application.

I'm using jquery-1.8.1 and jquery-ui 1.8.22.

I can't post all the code because I don't know what part of it is wrong and the whole code-base is huge. The animation is done this way:

//internal code that prevents updating data on the divs that are part of the animation
var hiding= true;
    var showing= true;

    containerToHide.$div.hide("slide", {direction: "left"}, 1000, function() {
        hiding= false;
        if (!showing) { //both animations ended
            //internal code to allow update data on div after animation ends
        }
    });

    containerToShow.$div.show("slide", {direction: "right"}, 1000, function() {
        showing= false;
        if (!hiding) {//both animations ended
            //internal code to allow update data on div after animation ends
        }
    });

I don't think this is the problem though, the animations are pretty standard stuff.

Any hints on what to look for would be greatly appreciated.

Answer 1

After hours of debugging I finally found the culprit. I'm using dojo to create some graphs. Dojo uses SVG to create the graphs, I had some gradient effects on the graphs.

Every time the graph was updated it would clear the old rect tag from the svg tag but it did not clear the lineargradient tag from the defs tag. After a couple of minute I had thousands of lieargradient tags on the graphs which was causing the slowdown when those graphs needed to be re-rendered, since I was sliding the divs that the graphs were inside all the animation would slow down.

I'm trying to find a way to clear the unwanted tags. Preferably through a Dojo method, but if not I will just manually remove them myself.