Ionic2 page transitions slowly when a page has alot of elements

[heddendorp]

Ionic version: (check one with "x") [ ] 1.x [x] 2.x

I'm submitting a ... (check one with "x") [x] bug report (kinda) [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

In my app I am displaying a newsfeed and also offer to only see news from a certain group. I recently noticed a delay of about .4 second when clicking the group label in order to switch to a group page and also when going back. It seems to get worse if more posts are displayed on the navigated to page. From running the constructor of the news page right now ~800ms to over 3000ms when I loaded more posts. I also want to note, that this does not happen on pc while using serve and I'm using a Oneplus 2 for testing.

I'd be happy to provide additional info.

EDIT: Here is a screencap of what I mean http://i.imgur.com/2yuQp32.gifv

Expected behavior:

Instant feedback such as ripple and page transitions. I'd prefer to have the page transition first and load after that if that was possible.

So far It turns out that removing the posts from the navigated page actually speeds up the navigation. And also it is possible to initialize the posts later to get fast navigation to a blank page. I think however the page is not complacated enough to justify >400ms of rendering when the posts are loaded.

Steps to reproduce:

Although I can't provide you with much here, the source code to the app is here https://gitlab.com/pikandpeople/mobile-next. And the problems manifest around the news page.

Related code: Mostly in https://gitlab.com/pikandpeople/mobile-next/tree/master/src/pages/news

Other information:

I also noticed that when I send the NewsLoadForGroupAction in the constructor of the newspage, ionic somehow only renders the posts once the effect ran through and produced the complete action. Seems very odd to me as well, I was suspecting that these kind of background things wouldn't interfere with the ui display

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

$ ionic info

Your system information:

Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.4.0
Xcode version: Not installed

[jgw96]

Hello, thanks for opening an issue with us! Out of curiosity how many "posts" are you loading at a time? Are you using virtual scroll or infinite scroll on that list? Whenever you have alot of dom elements on a page, like it you have a large list with many items, the browser will have to redraw each of those list elements every time the page re-renders. This can lead to a big perf decrease on mobile devices, where it is much more computationally expensive than on a desktop or laptop to render. This is why we have components like virtual scroll or infinite scroll. Also, this is not just an ionic issue, but is a common perf thing with web apps. If you look at other frameworks such as Polymer, you can see that they have an iron-list component that strives to do the same thing as our virtual scroll to solve this issue.

[heddendorp]

Well, in the initial case I am displaying 10 posts like this one http://i.imgur.com/eC6cvSe.png That results in the described 800ms, which is way more then I'd like to have . I tried virtual scroll. but apart from wrecking my layout big time it didn't result in any performance improvements. Many posts in this context I think are about 40 or something. Also of course @jgw96 thank you for the quick answer, I hope this info was helpful

[jgw96]

No problem, it was very helpful! Ok so hmm, this does not seem to be a re-rendering problem. So one thing you can change is where you do the loading of the posts. The constructor has to run before the component can actually be "initialized", so normally you do not want to have too much logic in the constructor beyond maybe initializing variables. This is the reason we provide our lifecycle events. So, i would recommend loading your posts in either the ionViewDidLoad or the ionViewDidEnter lifecycle event of your page and seeing if that has any effect on performance.

[jgw96]

Oh and also just like to say that virtualScroll is being constantly improved (:

[heddendorp]

Is it even supposed to handle such complicated items as my posts, I can say almost nothing about them before the layout is done. I'll move more stuff from the constructor into the lifecycle hooks, is there any advantage of the ionic ones over the angular hooks?

[jgw96]

We would like it to eventually yes, but as i said its a work in progress. Virtual lists are a challenging component to build.

On the lifecycle question, yep there is definitely some advantages. So the angular lifecycle events do work in an Ionic app, but we recommend using our lifecycle events as they line up better with how are nav system works and how our components boot.

[heddendorp]

I moved the stuff but still expereince a delay, the timer also has not changed very much. I feel like it should generally be faster right? I mean, these 10 posts and components should not take so long at any point.

EDIT: I tried removing the card repeat when opening a group, the response actually got better (timer went from 800ms to about 400ms) but this happened http://i.imgur.com/fvOQ80W.gifv EDIT2: I also added a gif of the original problem above

[jgw96]

Interesting @Isigiel. I will play with your repo some and get back to you on this

[heddendorp]

Thank you for looking into this. If you're browsing the project I'm also happy for every comment and tip however unrelated to this issue 😉

EDIT: I pushed the content loading further down the lifecycle, that results in faster transitions but renders a blank page first, lag is not gone. ALso the return to the newsfeed is still the same speed, visual lag

[heddendorp]

More updates, especially for @jgw96 . I tested some more, also moved the newsfeed to rects reselect library to see if that might cause the hit on performance, but it turns out even using static data does not improve the situation. EDIT: Even replacing all post content on the group site with just POST does not improve rendering, it seems to me like rendering is just really slow (prod mode also does not help)

I wonder if that is ionics top speed, not even blaming ionic but just a hybrid app, but if that's as good as it gets I'm not how to continue

[captaincole]

Any thoughts on this? Doing dev work here to try and improve transition speed. A few ideas I have had are that the rendering could take place during the transition, so whatever lifecycle event is called when the page starts to transition. Then you could take advantage of the current transition time to help (default is 300ms on iOS, 500ms on Android).

Another thought I had was implementing some multi-threading to help the UI rendering, via angular/web-workers. I have added some details to this comment in in Ionic-app-scripts repo.

@Isigiel I pushed my content loading to the lifecycle event ngAfterViewInit, how far back did you have to push it?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.