Very slow navigation with android

Hello

My app is very slow when navigating on my android device (LG Spirit Android 5.0.1). It works fine on iOS or on a desktop browser.

When I click on a button to navigate to a new page it is a bit slow in general (the time to complete the button animation). But my main issue is when navigating to a complex page : it is very very slow, sometimes it even freeze. I have a page with several buttons and when I click on one of them it opens a new page that has 2 tabs containing a list of elements and a side menu. The data displayed in the list depends on which button I clicked. I first thought that the charging of the elements in the list causes the slowness but even when I don’t charge them it is slow. I tried to install crosswalk as I saw it might help with performance issues on android but I didn’t notice any change. The slowness is higher at the first launch of the app. It decreases when the navigation already occurred (but it is still annoying) : I open the page (it is slow), go back and open it again (it is less slow). After some time testing the navigation like that I can also open at a correct speed the page with a button I didn’t try before. I tried with a Samsung Galaxy S3 and it was faster.

Any idea how I can fix that ?

1 Like

Would you be able to provide a demo of this?
It’s a bit hard to isolate where any issue could be with out seeing some code or a minimal replication of this.

Here is a demo that shows the main structure of my code : http://codepen.io/anon/pen/ZWqzLM

I kept it simple to avoid putting too much code in the codepen so tell me if there are some parts you want me to detail.

Finally I got a satisfying result when preventing the default animation during the navigation ( {animate: false} in push). I also put the call to fetch data in ngOnInit, it might have helped a little too (I tried various location without getting significant difference).

It is still a bit slow when navigating for the first time but it gets better afterwards and I guess I can’t expect much more of an hybrid framework on my device (android + rather slow device).

I guess when you go to other page, Angular2 tries to build template file related with the page. It takes long. I found Angular2 Template Compiler(https://www.npmjs.com/package/angular2-template-compiler). It could be a solution for this problem.

I am also facing the same issue … How to fix it can you put some sample code

I’m facing the same thing.
Navigation back is very slow on Android.
Works perfectly fine on the browser on my desktop.

You can get access to the full code on my (public) GitHuB repository: https://github.com/gdoron/rotter-hybrid

Steps to reproduce:

  1. Open the app (the client is from Israel and the app is in Hebrew, but it doesn’t matter)
  2. Click one of the items on the list
  3. Click one of the items on the list in the next page.
  4. Navigate back.
  5. Navigate back

The navigation back is horrifically slow.

Any suggestions on how to fix or workaround this?

I tested this on a nexus 5 running android 6x, and from what I can see, it looks like there’s just a lot of layout recalculation going on as your navigate back.

It might have something to do with you placing 300+ items in the list view.
I’d try to limit the number of elements you have to something more manageable.

1 Like

Thanks for the answer Mike!

Are you telling me ionic can’t handle 300 items in a list view?
That is very odd since I believe 300 items binding for Angular I believe to be a no brainier.

Is it an ionic 2 limitation?
If so, I think I’ll have to use native/React though I really like ionic 2!

You are getting confused with browser limitations.

Creating 300 bindings is not the issue, at all.
In fact you can create 3000 binding and still be fine.
But creating that many DOM node is the issue.
With that many nodes, anytime something animates, you have to recalculate the position of all them…

Things you can do

  • Instead of using ngOnInit, use ionViewDidLoad, so that you’re not constantly loading data.
  • Use virtualScroll to recycle elements. This will keep the dom content much lower, and the browser will spend less time trying to handle all the nodes.

image

Here’s a time line snap shot of the difference in you app with virtual scroll in place.

Notice the reduced time in trying to perform recalculate style and layout from the dev tools.

This actually solved it completely! Thanks, I wasn’t aware virtually scrolling was a built in feature inside the framework, great job!

What do you mean constantly loading data? what is the exact difference between the two?
Just that navigation back execute NgOnInit but not ionViewDidLoad in case the page is cached?

Thanks a ton Mike!

Ohh, BTW, I’m not sure who’s bug is it, mine or the framework, but if I’m clicking on a hash link, it works but there’s an error in the console saying:

invalid page component: null

It happens when I click on the link

<a *ngIf="comment.index > 0" href="#comment{{comment.parent}}" class="reply-to">בתגובה להודעה #{{comment.parent}}</a>


<div [virtualScroll]="comments">
    <section *virtualItem="let comment" class="comment" padding id="comment{{comment.index}}">
      <div class="top">
        <a class="author" href="#">{{comment.author}}</a>
        <div class="date">{{moment(comment.timestamp, 'X').calendar()}}</div>
      </div>
      <header [innerHTML]="(comment.index > 0 ?comment.index + '. ' : '')+comment.title"></header>
      <div class="body" [innerHTML]="sanitizer.bypassSecurityTrustHtml(comment.html)"></div>
      <footer>
        <a href="#" class="reply" (click)="reply(comment)">הגב</a>
        <a *ngIf="comment.index > 0" href="#comment{{comment.parent}}" class="reply-to">בתגובה להודעה #{{comment.parent}}</a>
      </footer>
    </section>
  </div>

Again, thanks a lot Mike!

The hash link would be something on us. We do some internal logic with navigation and it overrides the default behavior. It’s expecting to be passed a component and not really an ID has for scroll to navigation.

Hi Mike, it still very slow, it seems like the virtual scroll (among other stuff I tried) did not fix the issue.
You can read more on the GitHub issue I opened.

I’m afraid I’ll have to stop using ionic as I exhausted my options and ideas on how to fix the issue.

Thanks :cry:

@gdoron please use vitualScroll. This work for me.