Ionic scroll is pretty, but it’s performance is not good enough. I’m building an app which has a list of posts with images. I used ionic js scroll and collection-repeat, but then I switched to another scroll https://github.com/kamilkp/angular-vs-repeat . This repository is not perfect, but it does it’s work. No more flickering while scroll - android (even weak 4.2) or iOS.
I did small workaround to understand how scroll should work:
My two cents, I have nothing to do with a code so I may be wrong.
From the performance point of view choosing between visibility hidden and direct DOM access is like choosing between two evils. Adding and removing DOM elements sounds like a good idea but it’s a HUGE performance blocking point if you need to do it very fast in a short amount of time.
On the other hand, for visibility hidden to work its magic we must have everything preloaded into the DOM. Which is nice if we’re not talking about a large list. But this is usually not the case with collection repeat.
So as you see we’re choosing between two bad solutions here. None of them is right or wrong enough.
Native scrolling works better, but it can be only used with ng-repeat, thus making it usable only on smaller lists.
Personally I prefer smaller lists, longer lists are usually a sign of bad application planning. Even if longer lists are needed it’s much better to use them with infinite scroll.
https://github.com/kamilkp/angular-vs-repeat makes it work, I can test it deeper to understand how it works with really huge lists. Probably I will record a video with two versions of app - ionic scroll and angular-vs-repeat.
I use infinite scroll and pull-to-refresh in my list. It consists of such elements - 180px height block with background-image and title over it. I started with 10 items and then tested it with ≈30 item, but it doesn’t perform well with native (on some devices) or ionic scroll (on android ones). iPhone 6/5 works just fine in any case, but even Samsung Galaxy Note 4 and Nexus 4/5 are not. After I implemented angular-vs-repeat everything is smooth and nice even on $100 android devices.
I think angular-vs-repeat uses same group of DOM elements, and then update bindings and positions of items with transform: translate. So it’s like you scroll 10 items list (it depends) with native scroll and update bindings one by one while scrolling.
I think the best way to test it is to create fork of angular-vs-repeat and adapt to ionic. I plan to add some events and features like infinite scroll and refresher. This will let other people test it. I probably will start it tomorrow as I need it for my own (now it is just a hardcode).
Hey, Dmitry! Thx for the link, it’s very useful.
I wanna try to use it in my own app, because I have a lot of troubles with lists.
In my app I use posts with text and imgs and I can feel huge lags on Android devices while scrolling.
Please, don’t stop your investigation and share your results with us.
Thanks.
