Extreme slowdown using jquery-ui methods after a page has been open for some time

Question

Thus, my webpage uses a lot of jquery all over the world. This is a one page javascript application, and I pretty much create all the HTML manually using jquery. I have many divs in which I use draggable and resizable. I also use jquery-ui-effects.hide and .show with slide animations to move some divs.

When I run the application, everything works flawlessly, but after 10-15 minutes when the page is open, everything that uses jquery-ui methods becomes so slow that it is unusable. When I try to resize one of my divs, there is a serious slowdown when I first mousedown on the corner, and after I release the click, it takes a few seconds for the page to become responsive again. The same is true for drag and drop. Call $ (). Draggable and $ (). Resizable on divs also takes a lot of time. It is strange that dragging and resizing are not slow, only start / end. The longer the page is open, the slower it becomes.

All the other functionality on the page works fine even after one hour of the open page (I even have a basic picture on the canvas, but other jquery functions, but not jquery-ui, also work fine). There is no aparent memory leak since the browser never uses more than 150 mb of used memory.

Some people may say that the problem is that my functions start / stop resize / drag. This is not so, because I tried to remove them without any changes in speed, and this will not explain the slowdown of the animation.

CPU utilization is 100% (I use one main system) during the animation, it remains at 0% if the jquery-ui function is not used. When profiling the animation function (after opening the page for more than 30 minutes), I see that there is a method called curCSS (jquery-1.8.1.js line 6672) using 95% of the processor time. The same function uses only 4.5% if I started the animation a few seconds after starting the application.

I am using jquery-1.8.1 and jquery-ui 1.8.22.

I can’t post all the code because I don’t know which part is wrong, and the whole code base is huge. Animation is performed as follows:

//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 do not think this is a problem, although the animation is pretty standard.

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

Answer 1

After hours of debugging, I finally found the culprit. I use dojo to create some charts. dojo uses SVG to create graphs, I had some gradient effects on the graphs.

Each time the graph was updated, it would clear the old rect tag from the svg tag, but it would not clear the lineargradient tag from the defs tag. After a couple of minutes, I had thousands of lieargradient labels on the graphs, which caused a slowdown when these graphs needed to be re-displayed, as I crawled divs that the graphs were inside the entire animation, slowed down.

I am trying to find a way to clear unnecessary tags. Preferably using the dojo method, but if not, I just manually delete them myself.