`Draggable.create` performance issue with many items

[klaussner 2 Likes (Newbie)]

Hi GreenSock team,

 

I'm building a drag and drop list/grid with `Draggable` and ran into a performance problem with `Draggable.create`. As demonstrated in the CodePen, the list can contain a large number of items. When the "Make draggable!" button is clicked, `Draggable.create` is called for each element in the list to make it draggable. Unfortunately, this takes a lot of time, especially on mobile devices. Enabling drag and drop for 500 items on a Google Pixel 3a (Firefox) takes about six seconds.

 

It looks like the root cause of this performance issue is the `getGlobalMatrix` function, which appends and removes DOM elements and, therefore, causes several reflows per `Draggable.create` call. I attached two flame graphs that I recorded in Chrome. The first one shows a few consecutive calls and the second one highlights the reflows caused by a single call.

 

Do you have an idea how I can make the list initialization with `Draggable.create` more performant?

See the Pen MWWRmpE by cklaussner (@cklaussner) on CodePen

[GreenSock 18,231 Likes (Superhero)]

First of all, thanks for creating an excellent reduced test case! Super helpful. 

 

I figured out some ways to optimize things for cases like this. Here's a fork with beta versions of the upcoming release: 

See the Pen de6a858ec5e9d014f0b4befa4428df5f?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It's roughly 300-500% faster on initialization ? It still takes time to create 500 instances like that and set up all the listeners, cache the transforms, etc. but hopefully this performance boost helps in your situation. 

 

Happy tweening/dragging! 

[klaussner 2 Likes (Newbie)]

Thank you very much for improving this so quickly! Initialization is definitely fast enough for my use case now. Looking forward to the next release. ?