当应用于数千个元素时,jQuery UI .sortable()调用很慢

Question

我的问题基本上是这样的 - 将jQuery UI Sortable应用于页面上的数百个元素会导致页面加载速度非常慢 - 需要关于如何使其更有效的想法,但由于没有一个答案解决了我的问题,我问的是问题再次.

在300个元素(http://jsfiddle.net/LcgEL/)上应用.sortable()大约需要60ms.将其应用于数千个元素的结果时间接近250毫秒.这引入了一个非常明显的延迟,它会影响用户体验,因为它看起来应用程序是滞后的.

有什么方法可以加快速度吗？谢谢!

JSFiddle link for the code - http://jsfiddle.net/LcgEL/

Answer 1

一个艰难的问题,我遇到了类似的问题,数百张图片需要可拖动.和初始化只是花了太多时间

我能够通过在mouseenter上进行惰性实例化来解决它,它工作得很好,用户体验也没有改变

以下是可以使用sortable进行的操作:(http://jsfiddle.net/q8ND4/3/)

var $sortable1 = $( "#sortable1" ).sortable({
  connectWith: ".connectedSortable",
  items: ".sorting-initialize" // only insert element with class sorting-initialize
});
$sortable1.find(".ui-state-default").one("mouseenter",function(){
  $(this).addClass("sorting-initialize");
  $sortable1.sortable('refresh');
});

在您的示例中,它将时间从30毫秒减少到8毫秒.

另一个改进: 下一步是将mouseenter处理程序绑定到代码中的点时将它们附加<li>到列表中(如果这是通过客户端的js完成的)

Answer 2

您应该将您的jQuery UI版本回滚到版本1.11.4 https://jqueryui.com/download/all/

经过几天的挣扎,这是唯一帮助我的事情.我有大约800个条目在6个列表之间排序.使用UI v1.12.1我的页面加载大约需要20秒.切换到v1.11.4后,我的页面加载时间接近5秒.

我尝试了部分工作的ekeren解决方案,但是尚未初始化的元素不在"排序顺序"中,因此您只能与已经悬停的元素进行交互.

Answer 3

如果任何人,因为他们升级到1.12.1和我一样击中了性能问题这个页面上跌倒:不是回滚到1.11.4中,找到_setHandleClassName在排序窗口小部件功能(在周围线#5300在我的自定义下载jquery-ui.js),并改变:

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

至:

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

就像它在以前的版本中一样.

对于我的情况,这加快了从约20秒到几毫秒的700个项目的可排序列表的初始化.O_O

请注意:虽然我还没有看到任何问题在我的页面上使用这种方法,但由于时间不够,它尚未经过全面测试.