Opened 3 years ago

Last modified 3 months ago

#15097 new bug

Sortable in 1.12.x much (min 3x) slower than 1.11.x

Reported by: cucko Owned by:
Priority: minor Milestone: none
Component: ui.sortable Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:

Description

Here are two js fiddle examples

jq ui 1.11.4: https://jsfiddle.net/5z7fw7Lb/1/

jq ui 1.12.0: https://jsfiddle.net/5z7fw7Lb/

jq ui 1.12.1: https://jsfiddle.net/5z7fw7Lb/2/

Change History (5)

comment:1 Changed 3 years ago by Daijobou

I can confirm this problem. I have a page with six lists and summary ~3000 items. Chrome crashes with this browser tab, but only with version jquery ui 1.12.1. Sortable in version jquery ui 1.11.4 working fast and fine as replacement.

Other source: http://stackoverflow.com/a/41624770/706420

comment:2 Changed 2 years ago by Stephane

I can confirm the issue as well

comment:3 Changed 2 years ago by syddiqua

Same problem. Anyone will fix it after a year?.. 900 elements take 55sec, with 1.11.4 it takes only a few.

comment:4 Changed 7 months ago by naitsirch

Same problem here. I have a small snippet to reproduce the issue:

<ul></ul>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
  var ul = jQuery('ul');
  
  for(var i = 0; i < 2000; i++) {
    ul.append(jQuery('<li>List item ' + i + '</li>'));
  }

  ul.sortable({axis: 'y'});
</script>

I have found out that it is stuck when it assigns the class 'ui-sortable-handle' to the list's items (_setHandleClassName function).

The adding of the class takes longer for each item that has been processed.

Last edited 7 months ago by Ryan J Ollos (previous) (diff)

comment:5 Changed 3 months ago by Dustin

Through benchmarking I have confirmed this to still be a MAJOR performance issue for a large sortable and it still exists in v1.12.1. I have confirmed through benchmarking the following fix to this problem in jQuery UI v1.12.1 by modifying _setHandleClassName().

Change:

$.each( this.items, function() {
        that._addClass(
            this.instance.options.handle ?
                this.item.find( this.instance.options.handle ) :
                this.item,
            "ui-sortable-handle"
        );
    } );

to:

$.each( this.items, function() {
                    (this.instance.options.handle 
                     ? this.item.find( this.instance.options.handle ) 
                     : this.item
                    ).addClass('ui-sortable-handle');
            } );

I found this solution at https://stackoverflow.com/questions/20398400/jquery-ui-sortable-call-is-slow-when-applies-to-thousands-of-elements

Last edited 3 months ago by Ryan J Ollos (previous) (diff)
Note: See TracTickets for help on using tickets.