ionic 2滚动性能问题

Question

Quite impressed with blogs and reviews about ionic2 and Angular2, I started writing an application in ionic 2, and found that ionic2 scroll performance is not good for large number of records for both iOS, and Android.

1. I have a big list of items with in between images in most of the list items
2. The scroll performance is good for 10 to 20 items but its very slow when it comes to 30+ items
3. After lot of search found Virtual scroll in ionic and used it then performance slightly improved for up to 50 items but again slow after 65+ items

I tried WKWebview in iOS, have some improvement in performance, but often screen turns to black for large lists so i drop this idea. I don't want to use crosswalk due to its size increase of application , so never tried.

Can any one help to suggest any workaround to fix this issue or any pure javascript framework solution to display large lists with out any issues? for both Android and ios.

Answer 1

Scrolling is one of the most common interactions with a mobile application, and it is extremely important that it feels right. Native applications have lists that scroll smoothly, they are responsive to touch and changes of directions, they accelerate and decelerate in a way that feels natural.

Try use Virtual Scroll of Ionic2

Virtual Scrolling addresses this issue. In Ionic 1 this was called Collection Repeat, in Ionic 2 it is called Virtual Scroll, but it is a concept that is used widely in HTML5 mobile development. The basic idea is that we only create enough elements in the DOM to display the list data that is currently on screen, and we recycle those DOM elements to display new data as they scroll off screen.

More Info: Ionic Framework - Virtual Scroll

Answer 2

Scrolling performance is a common problem in most javascript frameworks.

This is because of touch and wheel events. But you can pass {passive:true} to event listener to enable some optimizations. By doing this up front you say that your handler will never use preventDefault() to disable scrolling.

addEventListener(document, "touchstart", function(e) {

},{passive: true});

It's not yet implemented in all browsers but hopefully, when it will be, all major js frameworks will adopt this technique.