Bad performance with more than 50 element

[mario-lemes]

Hey @souhe,

Great job in this component.

I figured it out when there are more than 50 elements, let say images, the componente (scroll) it's getting more and more slower. In some point it's impossible to make scrolling up or down smothly, in fact you have to wait almost 1 sec to got down or up.

Is there any way to improove this performance issue? I have some knowledge in javascript and it would be a pleasure to help you.

PS: Going deeper on your code I saw you are using react-motion to do this kind of moving animation, i think this is not too much optimized to handle a big amount of elements. What do you think?

Cheers.

[tkh44]

It is not react motion, animating margin-left and margin-top in order to fake the scrolling causes layout thrashing. There are a couple of concerns with performance on this lib.

• Using margin-top/left for animating as noted above
• Querying the DOM on every event cycle for layout dimensions

I have a fork with these fixed but have not had time for a pull request. While this is not helpful, I was able to scroll 1000+ items smoothly using translate3d and caching the dimensions.

[souhe]

Hi and thanks, I know that ScrrollArea has a lot of performance issues. But I have not found any good solution to fix those issues yet. (BTW @tkh44, your's ideas look promising) I will try to fix that issues. But I'm open to your ideas, solutions and PR.

[caphun]

@tkh44 we're hitting this issue too. You said you have a fork with the fix. Could you point me to it?

[tkh44]

@caphun it is not public unfortunately. I just ripped it out and ended up rewriting most of it from scratch. Here is a gist of what I had in my stash.

https://gist.github.com/tkh44/b20a330ed69ba56915c89190e04fe96d

Note I was using redux to hold the state in this example. The most important part is just switching out margin for transforms.

[StTraft]

Actually I have found using PureRenderMixin on the content wrapping Component can help. It may cause by, as @tkh44 said, layout thrashing. But I suspect more on updating each element components upon scrolling breaks the performance. Note I have a long list (over hundred props only components)

[tkh44]

If you really need high performance scrolling with many elements, maybe take a look at https://github.com/bvaughn/react-virtualized. This library is great for smaller lists, but once you get to very large lists there only so much you can do.

[nagendraK6]

I am facing similar issue. Any recommendation on scroller with better performance ? For > 100 elements, it's almost impossible to scroll up.