Jump to content
Search Community

`Draggable.create` performance issue with many items

klaussner test
Moderator Tag

Recommended Posts

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?

flame-graph.png

reflows.png

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

Link to comment
Share on other sites

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! 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...