Bug: Drag action is laggy when DOM is large on Google Chrome

[ccvivien]

My use case is somewhat similar to this example https://shopify.github.io/draggable/examples/multiple-containers.html

I have two columns, with elements I can drag and drop between the two. The dragging action is initilized with sortable = new Sortable(document.querySelectorAll('.freq-question-list'), draggable: '.freq-question') Below these two columns, I have a <select> (unrelated to draggable action) with many options (about 2000).

On chrome, the drag and droping action is unresponsive and very slow. If I remove the select from the DOM, the problem disappears and everything is smooth again.

I have no such problem on firefox.

I am able to reproduce this problem by copying the html code of the select and inserting it at the end of the body in this demo page: https://shopify.github.io/draggable/examples/multiple-containers.html

You can easily reproduce it on your side, simply generate a <ul> with ~2000 <li>, and insert it at the end of the body on the demo page. The drag and dropping action will get unresponsive and laggy.

• Library version: 1.0.0-beta.8
• Browsers: Chrome v80.0.3987.132
• Tech stack: Rails + webpacker
• Other information: Works well on firefox

[zjffun]

Can be reproduced in Firefox 76.0.1 also.

Reproduction:

var list = `<ul>${'<li></li>'.repeat(2000)}</ul>`;
document.body.innerHTML += list;

[qzminski]

I can confirm this problem. My DOM does not contain that many elements, but they are nested and visually complex (text, buttons, etc), which causes CPU to peak at around 70-90% when dragging items. Tested on Chrome and stats according to its Performance Monitor. The general impression is bad because it looks laggy. The Firefox has no problem of this kind in my testing environment.