Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
klaussner

`Draggable.create` performance issue with many items

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

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. ?

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.
×