Ionic-framework: Navigation is extremely slow on Android

[gdoron]

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

I'm submitting a ... (check one with "x")
[x] bug report
[ ] 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:
Navigation back is very slow on Android.
Works perfectly fine on the browser on my desktop.

Expected behavior:
The speed needs to improve by order of magnitude to make it usable for my client (and I believe or others).

Steps to reproduce:

You can get access to the full code on my (public) GitHuB repository: https://github.com/gdoron/rotter-hybrid
The code is really trivial and small, 3 pages app with nothing but showing data in lists (it's a forum).

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 on Android.

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

Your system information:

 You have been opted out of telemetry. To change this, run: cordova telemetry on.
6.5.0

Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.5.0
Xcode version: Not installed

Is it a known issue? Is there a workaround for this?

[gdoron]

I'm not sure the issue in the form is the same as I experience, but just in case:
https://forum.ionicframework.com/t/very-slow-navigation-with-android/50557

[jgw96]

Hello, thanks for using Ionic! Unfortunately I cannot reproduce this issue even on a first gen Moto G running Android 4.4.4 (1GB DDR3 ram and a 1.2GHz quad core Snapdragon). Are you using a production build ionic run android --prod ? With a dev build navigation will be slow (along with startup time) as Angular is running in dev mode and new pages that are navigated too are compiled as the app is running. With a production build your app will be run through NGC which will AOT compile all of your pages.

[gdoron]

Hi @jgw96.
I'm new to ionic and I must I was VERY impressed with how easy it is to build cross platform app!
In matter of couple of hours I built the app, and it felt great, so kudos for that!

My only concern is the performance, so if you can assist me with that, I'll be very please with ionic 2.

Anyway, I'm not sure I understand what you meant, when I'm running the app in the browser on my desktop using ionic lab\serve everything works fine and fast, then I wanted to share the app with the client and uploaded it with ionic upload but it's very slow there.

If I'm not mistaken, ionic lab\serve is using development build and it's fast enough on my desktop, while ionic upload uses production build, right?

p.s. I'm testing it on Nexus 5, android version: 6.0.1

[gdoron]

@jgw96 I'm curious why I experienced the slow in a much newer device while you didn't.
Maybe it has something to do with the --prod stuff that I didn't fully understand? Can you please help me understand?

Anyway, Mike was amazingly helpful by suggesting to use VirtualScroll which solved it completely.

[speedfl]

The standard build allows you to remote debug on chrome devtool like you can with serve
The build prod is using lot of processes to make your app faster and lighter
It build with ngc
It minimise the app and use uglify to make your code as much light as possible
For information on my app :
Simple build give me 15 seconds to launch my app and navigation is really slow.
With prod build the start is less than 4 seconds and navigation is really smooth (like native app)

[gdoron]

@speedfl @jgw96 When using Ionic view (ionic upload), is it the production build or the development?
Because it's still very slow, both on my Nexus 5, and on my client's iPhone (I don't know the version).

It's slow though I reduced the items in the list to 100 AND used Virtual Scroll.

I'm really puzzled as what's up with that slow navigation.
I can video record it if it helps.

[gdoron]

Here's the video showing the slowness:

https://drive.google.com/file/d/0B7K_le1qzH3ockhual9HTHBqUlk/view?usp=drivesdk

Thoughts?

[speedfl]

I never used your commands.
I saw your link it looks like ionic 1 documentation while you said you are in ionic2.
Can you show your package.json
Can you try :
For simple build : ionic run android
For prod build : ionic run android --prod

Keep me posted

[gdoron]

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic/storage": "2.0.0",
    "ionic-angular": "2.2.0",
    "ionic-native": "2.4.1",
    "ionicons": "3.0.0",
    "jquery": "^3.1.1",
    "moment": "^2.17.1",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.4",
    "typescript": "2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "ionic-plugin-keyboard",
    "cordova-plugin-splashscreen"
  ],
  "cordovaPlatforms": [],
  "description": "rotter: An Ionic project"
}

Regarding the ionic run android stuff, it's veryyy slow, but I guess the enumerator isn't configured right on my computer 😢

[speedfl]

This is more support than an issue. Please open in the forum and i will try to help you

[jgw96]

Hello! After reviewing this now seems like more of a support question. Because of this, i will urge that you ask this question on our forum or on our slack channel. Thanks for using Ionic!

[gdoron]

@jgw96 @speedfl sorry for not responding and being AFK, personal issues.
Anyway, I ran ionic run android --prod using my Nexus 5, it's still very slow.
It seems like it's something with ionic since I have a native app that does the same and the navigation is much smoother and feels natural.

I tried absolutely everything I could think of:

1. Using VirtualScroll
2. Using infinite scroll
3. And even limiting the amount of the items

No matter what I do, it is still very slow on navigation and on click of buttons.
Seems like I have no choice but leaving ionic trying React native or NativeScript or going all the way to native, though I'm a bit disappointed as it was really fun and easy to develop using ionic.

😢 😢

[gdoron]

Steps to reproduce:

Click on the first row in the first page: ("סקופים")
Click on a thread that has more than 100 comments ("תגובות") and go back.
The navigation back and fourth is very slow.

A nice guy over slack from the community just experienced the same slow when he ran my app.
@jgw96 I don't think it's a "support" issue, it feels like something is fundamentally wrong with ionic, but that's you to decide.

[gerhardcit]

I agree with @gdoron , I have just recompiled some Android apps that use to work perfectly fine with Ionic one, and it is very slow in running.
DNS lookup takes a loong time. Some ajax calls simply get stalled?
This is building with ionic 2.2.2 but it is a version 1 app still (javascript)
I don't think this is support. It seems something underlying is not right.

[gdoron]

I decided to quit ionic, it's slow for me and for everyone else using it, tested with extremely small app with 3 screens.
I don't see any reason to continue to invest resources in ionic.

My company will use other technologies.

👋

[SunilRumbaLama]

god, i was thinking that it was something to do with the device. Sigghhh if only i knew that the ionic application is slower on tabs :/ i would have remade the application in other.

[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.