jquery resizable is very slow if many divs are added

Question

I am writing a drawing editor using jquery-ui where you can add/remove shapes and move and resize them. This all works fine. But if I add too many shapes, then resizing one shape gets really slow. I made a jsfiddle, where you can see it, but in my editor it's 10 times slower with less shapes. I think because I have other event handler in there.

Here is the fiddle where resizing is fast: http://jsfiddle.net/oh6e9k6k/

And here the slow one with many shapes (takes some time to load): http://jsfiddle.net/oh6e9k6k/1/

The effect can be see best in Internet explorer.

Is there a chance to improve the performance with such a big amount of shapes? As I said in my editor it's even much slower whith even less shapes.

I want to avoid to do such things like attach the handlers only if user clicks on that shape and remove it if resizing/dragging is finished, but if there is no other solution, then maybe I have to.

Here is how the shapes get their functionality:

$(".shape").resizable({
    start: function (event, ui) {
        $(this).addClass("highliteShape");
    },
    stop: function (event, ui) {
        $(this).removeClass("highliteShape");
    }
}).draggable({
    cursor: "move",
     start: function (event, ui) {
        $(this).addClass("highliteShape");
    },
    stop: function (event, ui) {
        $(this).removeClass("highliteShape");
    }
});

I made a screencast from the real application to show what I mean: http:// screencast.com/t/r3xCwWdbp

Answer 1

I found a workaround for my problem. I only initialize the event handler (resize/move/click/doubleclick) for my shapes on a mouse enter event for the shape. This has also increases the load time dramatically. Now resizing a shape happens instantly.

http://jsfiddle.net/oh6e9k6k/3/

var maxSize = 2000;

function InitShapeEventHandler($shape){
    if(!$shape.hasClass("ui-resizable")){
         $shape.resizable({
            start: function (event, ui) {
                $(this).addClass("highliteShape");
            },
            stop: function (event, ui) {
                $(this).removeClass("highliteShape");
            }
        }).draggable({
            cursor: "move",
             start: function (event, ui) {
                $(this).addClass("highliteShape");
            },
            stop: function (event, ui) {
                $(this).removeClass("highliteShape");
            }
        });
    }
}


for(var x=0; x<maxSize; x+=35){
    for(var y=0; y<maxSize; y+=35){
        $("#ShapeContainer").append("<div class='shape' style='left:" + x + "px; top:" + y + "px;'></div>");        
    }
}




$(function() {
    // add some dummy code
    $(".shape").append("<div>x</div>");

    $(".shape").mouseenter(function(){
        InitShapeEventHandler($(this));
    });   
});