Ext. vertical scroll is slow with a lot of data. Anyone have performance recommendations?
Here’s more detail:
Let’s say you built instagram. Many posts and each post has multiple pictures. The further you scroll down, the slower your app gets.
If you scroll for 10 mins and then click out of the feed (which hides the group with the ext. scroll), this is when things get real bad.
If you scroll for 10 mins, then click your account settings (hiding the scroll feed), then jump back to the feed (ext. scroll) - these two clicks could take a massive amount of time or crash your app.
For people with ext. scrolling, any suggestions to solve this?
I have a Repeating Group with only 500 ish records - and it takes forever on the browser to render…
The first records load OK, but when it comes down with more items then the browser goes slower and slower to the freezing point. Also, when scrolling down, the infinite scroll sends to the top of the list, so, I lost the positioning, making it have to scroll all over again to reach the point I was before and then loads more records, pointing back to the top again…
It’s quite weird having so few records impacting so much the browser’s performance. This doesn’t happen with Instagram or any other social media with infinite scrolling…
If anybody has something to say about what needs to be done to increase the Repeating Group with Vertical Scroll would be great!
If you watch in developer mode you will see they implement infinite scroll by having a shadow DIV at end of the DOM which populates with the elements’ data. This will have a substantial performance impact. I’m not exactly sure how to get around this, and I don’t know why they choose this over less intensive in memory arrays.
This also leads to some inconsistencies when filtering and resetting inputs. We stumbled on this gotcha while generating SVGs of barcodes for lists of submitted samples.
Thanks @aaronsheldon. This confirms everything. Did you solve it by adding pagination?
When I switched from infinate scroll to pagination my app became way faster.
So anyone seriously interested in building a clone of a popluar app (facebook, instagram, medium, twitter, linkedin, etc.) could only do it with pagination. Infinate scroll in not ready for prime time quite yet.
Other than building an MVP, I wonder if anyone is using infinate scroll with success
Hi there,
Same problem in my case. My app starts slowing down when page is load when I got around 1000 items to load.
The thing is there is no logic because there is no difference between infinite scrolling and full list regarding the performance.
With infinite scrolling we do not asks the app to load all the items but only the first items of the list. Nevertheless, the app performance decreases like if we were asking the full list to load. So I do not even see the point to use infinite scroll against full list.
Pagination is really not an option in my case so if someone has an other way to load items faster I take it !
The answer would be to NOT LOAD a until a certain cell is visible. You would add math to calculate every 10 cells or so.
This would only work with pagination in mind, but instead of different “pages” for your items, you’d load them as segments.
Example; when a user is a scrolling, they will see a full list of things, and as they scroll down, they will see a loader to continue loading additional things until infinite.
This can used in conjunction with a “load thing when seen on page” plugin.
Do you have an example of this? I have been wrestling with this for a few weeks now and think I am more confused now than when I started from everything I have read and video I have watched. BTW Thanks in advance!!!
