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 comment:1
Changed September 21, 2017 12:30PM UTC by comment:2
I can confirm the issue as well
Changed October 27, 2017 09:30AM UTC by 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 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 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-elements → 1565485562387612 |
---|
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
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