Skip to main content

Search and Top Navigation

#15097 new bug ()

Opened November 11, 2016 12:03AM UTC

Last modified August 11, 2019 01:06AM UTC

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/

Attachments (0)
Change History (5)

Changed March 31, 2017 08:40PM UTC by Daijobou comment:1

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

Changed September 21, 2017 12:30PM UTC by ste26054 comment:2

I can confirm the issue as well

Changed October 27, 2017 09:30AM UTC by syddiqua comment:3

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

Changed April 05, 2019 01:35PM UTC by naitsirch comment:4

_comment0: 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 stucked when it assigns the class 'ui-sortable-handle' to the list's items (_setHandleClassName function). \ 1554471465868930
_comment1: 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 stucked 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.1554473614377307

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

#!text/html
<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.

Changed August 11, 2019 12:35AM UTC by rjollos comment:5

_comment0: 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-elements1565485562387612

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