search

souhe / reactScrollbar

Scrollbar component for React
MIT License
467 stars 137 forks source link

Bad performance with more than 50 element #38

Open mario-lemes opened 8 years ago

mario-lemes commented 8 years ago

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 commented 8 years ago

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.

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 commented 8 years ago

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 commented 8 years ago

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

tkh44 commented 8 years ago

@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 commented 8 years ago

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 commented 8 years ago

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 commented 7 years ago

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