Search jQuery

jQuery Forum

maciej.li..

Major performance problems with Selectable

in Using jQuery UI • 2 years ago

Selectable seems to work fine only as long as there aren't many elements to be selectable.

With 50 elements performance is terrible, with more (I needed ~500) $('#selectables').selectable() really takes it's time - on a fairly decent hardware Chrome 4.0 takes over 30 seconds and Firefox 3.6 over a minute (but tends to crash).

Any ideas?

Replies(4)

i2hsu

Re: Major performance problems with Selectable

2 years ago

In FF 3.6, I created 1000 elements on an <ul> and called selectable() on it. It took about 200 ms.

var $selectable = $('#selectable');
for (var i=0; i++<1000;) {
$selectable.append('<li> Item #' + i + '</li>');
}
var start = new Date().getTime();
$selectable.selectable();
var end = new Date().getTime();
alert(end-start);

Do you pass in any extra options for the Selectable? I can suggest running the Profiler in Firebug to find out what functions are taking up most CPU cycles.

mugwump

Re: Major performance problems with Selectable

1 year ago

same issue here with me: I suspect that the problem are not the options that get passed into the selectable, but how complex the objects are that are selected. The ui-selected gets added to every descendant of the selectable element: Is that really necessary?

I can live with ui-selected only on the top element - if there are any styles I need to apply on descendants, I can do so by applying the proper css-rules. I also noted, that there are occasions when the ui-selected is not removed properly from descendants - this problem would also go away when the ui-selected is only added to the top-level element - but maybe I simply don't understand why it is added to all descendants?!

mugwump

Re: Major performance problems with Selectable

1 year ago

adding a filter solved at least my performance-problem: by default, selectable adds its classes to the top-element and all descendants: Which can be painfully slow, if you have complex dom that can be selected. Adding a filter like

$("#items").selectable({filter: 'li'});

restricts the selectable-classes to the top-level-element, which can speed up the selection-process a lot...

gimparm

Re: Major performance problems with Selectable

1 year ago

Has anyone done anything more about this? It isn't a matter of using a filter, its just how many items get added.

It would be nice if I could add elements to the selection group. Obviously you don't always have 1,000 elements on the screen, so I could at least add things on the fly and spread the work out instead of trying to do all of them at once.

Top Reply

Response title

Attachments

jQuery Forum

Major performance problems with Selectable

Replies(4)

Re: Major performance problems with Selectable

Re: Major performance problems with Selectable

Re: Major performance problems with Selectable

Re: Major performance problems with Selectable

Statistics

Tags

Actions

Related Posts