Very slow and laggy in google chrome with many items

[Kcko]

I have seen a few issue with this problem but nothing helped for me. Is it a solved this problem?

See short video (~30sec),

1) Its fast with a few items 2) Its very slow with many items

http://bit.ly/2QyoTRI

How how can be it solved?

Code

`var $uiSortableWrapper = $('.ui-sortable-wrapper', this); if ($uiSortableWrapper.length) { require(["sortable"], function (Sortable) {

        var wrapper = this;
        var sortablePages = $('#sortable-pages').data('url');
        var containers = $('.ui-sortable-wrapper');

        containers.each(function () {

            var $thisContainer = $(this);

            var _sortable = Sortable.create(this, {
                animation: 150,
                scrollSensitivity: 200,
                draggable: ".col-draggable",
                group: 'colmediaobject',
                ghostClass: 'ghost',
                onStart: function () {
                    $('#snippet--content').addClass('sortable-life-cycle');
                    //$('html').addClass('poev-none');

                    $thisContainer.removeClass('now-not-connected');

                    $thisContainer.find('.col-media-object')
                                    .removeClass('col-media-object');

                    $thisContainer.find('.col-media-separator').remove();

                },
                onAdd: function (evt) {
                    var pages = _sortable.toArray();

                    $.nette.ajax({
                        url: sortablePages + '&sectionId=' + evt.srcElement.dataset.sectionId + '&pages=' + pages + '&redraw=0',
                        off: ['history', 'unique'],
                        netteExt: ['ajax-catalogue-overlay']

                    }, function () {

                    });
                },
                onEnd: function (evt) {
                    //$('html').removeClass('poev-none');
                    var pages = _sortable.toArray();

                    $.nette.ajax({
                        url: sortablePages + '&sectionId=' + evt.srcElement.dataset.sectionId + '&pages=' + pages + '&redraw=1',
                        off: ['history', 'unique'],
                        netteExt: ['ajax-catalogue-overlay']

                    }).done(function(payload){

                        $('#snippet--content').removeClass('sortable-life-cycle');

                    });
                },
            });
        });
    });
}`

[owen-m1]

1. What version of Sortable are you using?
2. Does it happen if you remove the event handlers you have defined?

[Kcko]

1) Latest 2) Without change, still very laggy (http://bit.ly/2QzayVj)

(if items up to ~ 50, seems to be Ok, and if more lag hell comes).

[owen-m1]

@Kcko Ok, well if you could make a JSBin with this issue it would be helpful, maybe with just two of those cards. If you can't share it publicly you can email it to me, but I can't figure out the issue without a live example.

[Kcko]

@owen-m1 Thx for ur interest. Its very difficult to create a functional demo (specific our libraries etc) I will make a demo account and send you acccess, via e-email? (Can you give me pls?)

[owen-m1]

@Kcko Of course. Owen23355@gmail.com

[ghaiat]

Hello We re facing the same issue. any updates? Cheers

[owen-m1]

@Kcko Did you end up figuring it out?

[pascalporedda]

I'am currently facing the same problem. If I enable the forceFallback option, it is working fine in chrome as well. Firefox is fine, even without the forceFallback option.

This seems to be an issue with the native DnD behaviour of Chrome I guess, dunno if this is even "fixable".

[nonoesp]

Same issue here. (Fast with few items; really slow with many items.)

[owen-m1]

@nonoesp If you could share your setup with me I might be able to help

[evaneykelen]

Same issue here. Seeing 4-5 seconds delay before onChange fires after dropping an item in a 2000 item list. Found workaround by applying forceFallback: true. On Chrome 78, macOS.

[owen-m1]

@evaneykelen You shouldn't have 2000 items in the list at once. Use a lazy loading library to only load the items that are in view.

[tensiondriven]

For the benefit of others - this seems to be due to repaints - One post said "if you don't use position: relative then performance improves significantly".

Another said they "solved" it by dynamically turning off animation, see:

https://github.com/SortableJS/Sortable/issues/21#issuecomment-653840323

[jesusvimlet]

The issue still remains.

[jeffsupancic]

This is still an issue. The performance is much better in Firefox, so not sure if there's anything this library can do.

[DerekJDev]

Is there any update on this?

I was running into performance issues using version 1.14.0 (Latest) when I had are 150 sortable instances. I tried commenting out the events, but still had lots of lagging making my app non-usable. I tried setting all the instances to forceFallback: true and animation: 0, but that still didn't help.

To fix this the only thing that I found to work was reverting back to version 1.9.0.

[KnIfER]

https://github.com/SortableJS/Sortable/issues/21#issuecomment-1303071441

another fix : skip animation on invisible items another fix : remove too many dispatch...'select' another fix : only play fold/unfold animation for a few items

[enriquerecor]

I found a solution for my case that I describe in issue #1723:

animation: 0,
forceFallback: true,