Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Virtual List poor performance on iOS v2.0-beta4 #6104

Closed
rodrigoreal opened this issue Apr 10, 2016 · 20 comments
Closed

Virtual List poor performance on iOS v2.0-beta4 #6104

rodrigoreal opened this issue Apr 10, 2016 · 20 comments
Assignees
Milestone

Comments

@rodrigoreal
Copy link

Short description of the problem:

Well, im trying the virtual list, and it worked perfect in android, it really boost my app in performance, but with iOS i got a really bad performance, it gets really laggy.

I have a list with 450 items and i'm using cards, and each card has some images.

Anyone having this same problem?
Thanks

Which Ionic Version? 2.x

Run ionic info from terminal/cmd prompt: (paste output below)
Your system information:

Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.4
Ionic CLI Version: 2.0.0-beta.24
Ionic App Lib Version: 2.0.0-beta.14
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v5.6.0
Xcode version: Xcode 7.3 Build version 7D175

@adamdbradley
Copy link
Contributor

If you remove the images is the performance better? There's some updates that need to happen to ion-img for iOS. Right now Safari doesn't do a good job handling image requests.

@adamdbradley adamdbradley self-assigned this Apr 11, 2016
@rodrigoreal
Copy link
Author

@adamdbradley If i remove the img the perfomance is better, but it is not good enough.
I tried with ion-img and img, but i didint got any better performance, and the imgs are local, so im not using any http requests.

@ghenry22
Copy link

I have been testing virtual scroll with large lists including thumbnail images for each item as well and have also found some performance issues.

I have tried with both ion-img and regular img tags.

The main issue I notice is that when I first swipe either up or down there is a noticable stutter and THEN the scrolling starts and is nice and smooth. Seems like just as it leaves the current viewport it stutters for a moment and then goes, almost like it's loading the next set of data and then it's all good.

it's a bit better with <ion-img when not using local images.

@ghenry22
Copy link

I have been testing this further with the same app and find that:

on Android device: virtualScroll is very smooth even with 1000+ item lists all with images

in Chrome with ionic Serve: virtualScroll is very smooth even with 1000+ item lists all with images

on iOS device (iphone6 os9.3): virtualScroll seems to have an initial lag the first time that you scroll, you don't seem to get the standard animation, it stutters and then jumps straight to where your scroll would have ended, subsequent scroll actions on the same list on the same page are much smoother. Very odd.

@evgeniynet
Copy link

just idea, can we use passive eventlistener polyfill (https://github.com/WICG/EventListenerOptions)?

@ghenry22
Copy link

I just read the blog for the release of beta6 that states that virtualScroll is already faster than collection-repeat and I think this is probably true on Android.

on iOS though I have the same large list in colletion-repeat in my old app version and it scrolls fine. with virtualScroll on iOS there is a huge lag when you first start to scroll, it doesn't really animate the scroll, just jumps and stutters and then smooths out a bit but is still not close to what is achieved on the same list with collection-repeat on ionic v1.

I have updated to beta6 and tests on an iphone6 and see the same also in the iphone6s emulator.

Perfectly smooth in ionic serve or in Android though. Would be great if some attention could be put towards performance on iOS as at the moment it's a complete blocker to letting anyone else start testing on my app.

I am happy to help testing on real devices and in browser to validate any changes made if that helps.

@ghenry22
Copy link

In case this was just related to images on iOS I also tried removing the per item images and just using an icon, same icon for every item and a much shorter list and I still get this big stutter when you first start scrolling.

This is the same on beta6 as it is on beta4.

Can be reproduced on both the emulator and a real device like the iphone6.

tried enabling prodmode as well just in case that granted some extra performance on ios but still the same.

retested on android again and Android virtualScroll is awesomely smooth with the same code.

@ghenry22
Copy link

Found something interesting. Tested with the wkwebview plugin with local webserver, ran through xcode to monitor resource usage and the scrolling is silky smooth and everything works beautifully. Unfortunately wkwebview is not an option for me until I can access storage locations outside of the www/ root. But interesting that the virtualScroll performance looks great here.

I then went back to uiwebview and ran through xcode so I could monitor it's resource usage. While resource usage is obviously higher the CPU was still only peaking at 50% memory usage around 80-90mb which is very normal from my experience. So it didn't seem to be a straight performance issue on starting to scroll the list.

Interestingly though in the native console I noticed that there IS an exception thrown at the point when the first page with virtualscroll is entered and then a smaller error thrown on every page with virtual scroll after that. This might be what is causing the initial lag and then the poor scrolling performance after. I have pasted the log below from cold app start up to enter the first view with virtualscroll where the large error is thrown, then moving in and out of other views with virtual scroll triggers the smaller errors at the end each time a view is entered.

2016-04-27 09:25:39.359 beta4[5574:2205235] Apache Cordova native platform version 4.1.1 is starting.
2016-04-27 09:25:39.364 beta4[5574:2205235] Multi-tasking -> Device: YES, App: YES
2016-04-27 09:25:39.624 beta4[5574:2205235] Using UIWebView
2016-04-27 09:25:39.629 beta4[5574:2205235] [CDVTimer][handleopenurl] 0.133991ms
2016-04-27 09:25:39.632 beta4[5574:2205235] [CDVTimer][intentandnavigationfilter] 3.175974ms
2016-04-27 09:25:39.632 beta4[5574:2205235] [CDVTimer][gesturehandler] 0.104010ms
2016-04-27 09:25:39.663 beta4[5574:2205235] [CDVTimer][splashscreen] 31.032026ms
2016-04-27 09:25:39.715 beta4[5574:2205235] [CDVTimer][statusbar] 50.534010ms
2016-04-27 09:25:39.717 beta4[5574:2205235] [CDVTimer][keyboard] 1.479983ms
2016-04-27 09:25:39.717 beta4[5574:2205235] [CDVTimer][TotalPluginStartup] 88.863015ms
2016-04-27 09:25:42.176 beta4[5574:2205235] Resetting plugins due to page load.
2016-04-27 09:25:43.340 beta4[5574:2205235] Finished load of: file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/index.html
2016-04-27 09:25:45.132 beta4[5574:2205235] DEVICE READY FIRED AFTER 1968 ms
2016-04-27 09:25:45.142 beta4[5574:2205235] all albums count: 1093
2016-04-27 09:26:26.649 beta4[5574:2205235] EXCEPTION: TypeError: null is not an object (evaluating '_this._el.removeEventListener')
2016-04-27 09:26:26.649 beta4[5574:2205235] ERROR: EXCEPTION: TypeError: null is not an object (evaluating '_this._el.removeEventListener')
2016-04-27 09:26:26.649 beta4[5574:2205235] ERROR: STACKTRACE:
2016-04-27 09:26:26.649 beta4[5574:2205235] ERROR: file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:64778:22
ngOnDestroy@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:58447:35
dehydrateDirectives
dehydrate@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:15442:33
destroyRecursive@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:15455:23
destroyRecursive@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:15462:41
destroy@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:25081:45
destroyViewInContainer@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:25546:21
remove@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:25408:41
file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:46558:41
destroy@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:47996:30
file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:46484:25
forEach@[native code]
_cleanup@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:46482:25
_transFinish@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:46401:30
file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:46161:31
file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:46374:21
invoke@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/angular2-polyfills.js:390:34
onInvoke@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:29625:47
invoke@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/angular2-polyfills.js:389:43
runGuarded@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/angular2-polyfills.js:297:54
runInner@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:29656:81
run@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:29563:74
_afterTrans@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:46345:23
file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:46321:34
_didFinish@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:38452:26
play@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:38126:28
file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:46332:36
invoke@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/angular2-polyfills.js:390:34
run@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/angular2-polyfills.js:283:50
runOuter@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:29658:74
runOutsideAngular@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:29576:88
_beforeTrans@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:46290:37
_postRender@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:46272:26
file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:46207:38
file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:46585:17
invoke@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/angular2-polyfills.js:390:34
onInvoke@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:29625:47
invoke@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/angular2-polyfills.js:389:43
run@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/angular2-polyfills.js:283:50
file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/angular2-polyfills.js:635:61
invokeTask@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/angular2-polyfills.js:423:43
onInvokeTask@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/app.bundle.js:29616:51
invokeTask@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/angular2-polyfills.js:422:55
runTask@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/angular2-polyfills.js:320:58
drainMicroTaskQueue@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/angular2-polyfills.js:541:43
g@file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/es6-shim.min.js:11:1947
file:///var/containers/Bundle/Application/00004377-9A56-4A8A-AD20-E62CD8830B6E/beta4.app/www/build/js/es6-shim.min.js:11:1877
promiseReactionJob@[native code]
2016-04-27 09:26:26.956 beta4[5574:2205235] -[WebActionDisablingCALayerDelegate willBeRemoved]: unrecognized selector sent to instance 0x12751a0a0
2016-04-27 09:26:26.960 beta4[5574:2205235] *** WebKit discarded an uncaught exception in the webView:willRemoveScrollingLayer:withContentsLayer:forNode: delegate: -[WebActionDisablingCALayerDelegate willBeRemoved]: unrecognized selector sent to instance 0x12751a0a0
2016-04-27 09:26:39.260 beta4[5574:2205235] Received memory warning.
242016-04-27 09:27:32.518 beta4[5574:2205235] -[WebActionDisablingCALayerDelegate willBeRemoved]: unrecognized selector sent to instance 0x12751a0a0
2016-04-27 09:27:32.518 beta4[5574:2205235] *** WebKit discarded an uncaught exception in the webView:willRemoveScrollingLayer:withContentsLayer:forNode: delegate: -[WebActionDisablingCALayerDelegate willBeRemoved]: unrecognized selector sent to instance 0x12751a0a0
2016-04-27 09:57:13.710 beta4[5574:2205235] exeption nativeEvalAndFetch : TypeError: null is not an object (evaluating 'elt.constructor')
2016-04-27 09:57:45.540 beta4[5574:2205235] -[WebActionDisablingCALayerDelegate willBeRemoved]: unrecognized selector sent to instance 0x12751a0a0
2016-04-27 09:57:45.544 beta4[5574:2205235] *** WebKit discarded an uncaught exception in the webView:willRemoveScrollingLayer:withContentsLayer:forNode: delegate: -[WebActionDisablingCALayerDelegate willBeRemoved]: unrecognized selector sent to instance 0x12751a0a0
2016-04-27 09:57:56.192 beta4[5574:2205235] -[WebActionDisablingCALayerDelegate willBeRemoved]: unrecognized selector sent to instance 0x12751a0a0
2016-04-27 09:57:56.192 beta4[5574:2205235] *** WebKit discarded an uncaught exception in the webView:willRemoveScrollingLayer:withContentsLayer:forNode: delegate: -[WebActionDisablingCALayerDelegate willBeRemoved]: unrecognized selector sent to instance 0x12751a0a0

@ghenry22
Copy link

ghenry22 commented May 8, 2016

Any chance of some feedback on this? It seems to be a problem that still persists with beta6 and only affected uiwebview on iOS.

@fdelayen
Copy link

With beta6, we have problems on ios here too.
While on android it's working really well, on ios it's doing nonsense with items you can't see, white spaces everywhere... Strange !

@DavidWiesner
Copy link
Contributor

Same issues on beta6 with iOS 9.3.2. With ~1600 items. When I try to scroll them list items will blanked and then my app crashed with Terminated due to memory error.

@ghenry22
Copy link

This issue is even worse with beta7. Scrolling is now extremely laggy. ion-img no longer loads images in virtualscroll list after scrolling for me either.

virtualscroll on ios uiwebview really needs a bit of love, it's not usable at the moment for me unfortunately.

@marianocodes
Copy link

marianocodes commented May 27, 2016

Did anyone find any solution for this? I actually have a virtual scroll with just 20 items and it doesn't work well at all. This issue is present in ion-list and ion-select as well. On android works perfectly.

@ghenry22
Copy link

Yeh it doesn't seem to be better with shorter lists. As I posted above I see errors thrown in the native console when I start to scroll a virtual list.

I haven't seen any feedback or comments from the ionic team yet about performance on ios.

@adamdbradley I know that ionic2 is in beta state but any chance of a quick update on when virtualscroll on ios is likely to get a little love? It is brilliant on Android for me, far better than collection-repeat ever was and on ios with wkwebview it is also really fast but unfortunately wkwebview has pretty limited application at the moment with all it's limitations.

@adamdbradley
Copy link
Contributor

Thanks for the feedback and error logs, I'll start looking into improving performance on UIWebView.

@evgeniynet Yeah Passive Event Listeners would be awesome here, but sadly we're still constrained by UIWebView. But eventually we will be able to move to Passive Event Listeners which should bump up performance.

@ghenry22
Copy link

ghenry22 commented Jun 9, 2016

Happy to help out testing if that is useful just let me know

@jgw96
Copy link
Contributor

jgw96 commented Jun 21, 2016

This issue is related: #6984

@adamdbradley
Copy link
Contributor

@ghenry22 Have you been able to test out beta9's virtual scroll?

@ghenry22
Copy link

@adamdbradley - Yes I have updated to beta9 and it appears much better but still with some issues as I logged in #6984 which make it a bit hard to test thoroughly at the moment.

@adamdbradley
Copy link
Contributor

Ok thanks, then I'll close this one and we can work off the new issue.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 8, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants