Any optimization possibilities for big lists?

[RSWilli]

https://svelte.dev/repl/2c9754ae1a9e43f287924e52e3024b78?version=3.22.2

in this REPL I used your basic example and made one list big (I tested it with 800 and 1600 elements)

the reordering inside the big list works (surprisingly) responsive (good job!)

but when adding a new item from the short list, or removing one item there is a short moment where my browser hangs

is there any possibility for optimization?

for a react application I would consider windowing here and I found Rich Harris' svelte version https://svelte.dev/repl/f78ddd84a1a540a9a40512df39ef751b?version=3.38.2

[isaacHagoel]

Interestingly, if u remove the flip animation it becomes snappy. could it be that the browser hangs because of the animation?

On Wed, Jun 9, 2021 at 7:58 PM RSWilli @.***> wrote:

https://svelte.dev/repl/2c9754ae1a9e43f287924e52e3024b78?version=3.22.2

in this REPL I used your basic example and made one list big (I tested it with 800 and 1600 elements)

the reordering inside the big list works (surprisingly) responsive (good job!)

but when adding a new item from the short list, or removing one item there is a short moment where my browser hangs

is there any possibility for optimization?

for a react application I would consider windowing here and I found Rich Harris' svelte version https://svelte.dev/repl/f78ddd84a1a540a9a40512df39ef751b?version=3.38.2

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/296, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC7VHFD74GSILSUIL2DTR43LFANCNFSM46LWGGOA .

[RSWilli]

nice catch on that

I also investigated further, and I found the following:

when you drag something from the other list, handleDropConsider will run and override the items

overwriting the items rerenders the component, firing the update() from the action

(I got until here, i suspect you are attacing event listeners or something like that on all 800 elements, my suspicion is that this behaviour could be improved by something lika a datastructure that diffs more easily)

[RSWilli]

https://github.com/isaacHagoel/svelte-dnd-action/blob/1d6fc05459d367db04544cd5bb05bfdc054bad1d/src/pointerAction.js#L492-L514

in these lines you have to iterate twice over the 800 elements list, which I suspect i the cause for this short lag

the first iteration happens in findShadowElementIdx

https://github.com/isaacHagoel/svelte-dnd-action/blob/1d6fc05459d367db04544cd5bb05bfdc054bad1d/src/pointerAction.js#L120-L123

and the second one is the loop over all children of the node

do you think that a better update strategy would be possible, like only iterating over new objects?

In that case you only need to iterate over every child once on initialization and only update every new object

[isaacHagoel]

I am all for optimizing in areas that make a difference but do you see any slowness when the flip animation is removed? The same loops are there regardless

On Wed, Jun 9, 2021, 21:04 RSWilli @.***> wrote:

https://github.com/isaacHagoel/svelte-dnd-action/blob/1d6fc05459d367db04544cd5bb05bfdc054bad1d/src/pointerAction.js#L492-L514

in these lines you have to iterate twice over the 800 elements list, which I suspect i the cause for this short lag

the first iteration happens in findShadowElementIdx

https://github.com/isaacHagoel/svelte-dnd-action/blob/1d6fc05459d367db04544cd5bb05bfdc054bad1d/src/pointerAction.js#L120-L123

and the second one is the loop over all children of the node

do you think that a better update strategy would be possible, like only iterating over new objects?

In that case you only need to iterate over every child once on initialization and only update every new object

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/296#issuecomment-857601676, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC56KOFKGVOURHBL733TR5DEZANCNFSM46LWGGOA .

[RSWilli]

Sorry for the late response

when the flip animation is removed, it gets better

but removing the animation makes the interaction kind of jarring

for my application I reduced the list size through pagination, so the performance is better

[MentalGear]

Also very interested in performance optimization as I also encountered lag with big lists of several hundred items.

[isaacHagoel]

Hi, Are you open to working on this and making a PR? I will assist of course

On Sat, Dec 2, 2023, 06:08 MentalGear @.***> wrote:

Also very interested in performance optimization as I also encountered lag with big lists of several hundred items.

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/296#issuecomment-1836633736, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC4WNBGA2P7FUZQIRUDYHITJ5AVCNFSM46LWGGOKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBTGY3DGMZXGM3A . You are receiving this because you commented.Message ID: @.***>