I have a really small app code-wise, which displays an item list (each item has several nested properties) that I can filter with a search field. Initially I load 20 items from an API. Once the user reaches the end of the list, he can click on “load more” to load another 20 items. After the items are retrieved they are stored in LocalStorage to avoid too many API calls (caching). The list can grow pretty quickly (if using infinite scroll even faster) and you can really feel the UI getting less and less responsive.
Here are my performance observations. It shows the CPU usage spike while scrolling the list component. And by scrolling I mean quickly flipping through the list. As the list grows faster, people tend to scroll faster back and forth as well. I’ve run this with iOS 7 on iPhone 5:
20 items, CPU 30%
40 items, CPU 40%
60 items, CPU 45%
80 items, CPU 50%
100 items, CPU 60%
Of course these measurements are not really scientifically accurate, but I guess it is a good indicator. Once the CPU reaches 100%, it’s no more joy for the user. UI is really sloppy, hangs, and you start to tab things multiple times because they don’t respond.
I’m sure that there are such limitations which probably will never be as good as it can get with a native app.
I’m interested in ideas on how to improve this. Maybe using a less complex items list (flat, just the properties which are shown in the list - but then you would lose part of the search functionality), removing items which are not currently visible in the scroll view and replacing them by placeholders, generally truncating the list on resume, suspend, some kind of timeout…?
I’m really curious about your ideas!