Ionic2 very slow on Windows Phone 10


#1

Hi,

I am new to the forums, first of all allow me to thank you for creating Ionic2, it is a great mobile app platform.

We have successfully created a basic private preview application with Ionic2 RC0 for Android and IOS but unfortunately performance for Windows Phone 10 (Universal) is extremely slow on ARM based Lumia 830.

I promise I have done my due diligence in researching and investigating this issue. I have searched through all of the forums and blog posts but for any work arounds or suggestions and have not found anything. For the most part the only other person to report this issue is here (is no one developing for Windows Universal targeting Windows Phone 10?):


[Note: the title is Android and IOS but the comment I linked to includes a comparison with Windows Phone which is very slow]

The above post is for RC0 (I am also using RC0 in my app). Just for testing I have tried running that same conference sample application (which has been upgraded to RC5) on the Lumia and it appears to be slightly faster for some actions but honestly still very slow overall. I made a quick video here for your reference (sorry about the quality). There is significant delay when switching tabs or selecting menu items. Scrolling in the list view is very fast due to the virtualization (great job folks!).

For my own testing purposes I tried to do a port of my application to RC5 (and also tried RC4) and performance was more or less the same as RC0. I encountered some bugs that I am trying to resolve including the tabs view not repainting content after switching tabs. I am still investigating the root cause for this, if I discover a bug I will let you guys know in a separate issue on Github.

Anyway, back to the performance issue. So far, I have not found any way to get the performance better for Windows (in particular when targeting a phone device). I have done some profiling of the issue. The below is on RC5 with my application. Ignore the region I labeled for 2FA login time. Notice the FPS drops to zero in the regions when switching tabs (longer time based on how much DOM is on the page). All of the time is spent on a cascading series of DOM change events for readystatechange. I cant really dig deeper into that because then the JS stack trace gets eaten by zone.js so you cant get much info into what is happening in Ionic land (if you have an idea how to dig deeper let me know).

For reference this is the same sequence of user events when running in RC0:

Note that although it indicates double the reaction time for the DOM event compared to RC5 it appears to be actually a grouping of two events of the same length. When I profiled in RC5 they were not grouped this way but were instead individually listed. So I suspect that it is just the profiler reporting it differently (due to grouping) and not a 100% speed improvement in RC5 vs. RC0 (due to the fact that the duration of the FPS drop time is roughly the same for each region and user perceived performance is equally low).

I am more than happy to continue to help investigate and improve the performance for Windows Universal platform (specifically when targeting a phone device, running on desktop/laptops is always fast due to better hardware). But after a few days of testing and investigation I think I am a little stuck.If you have any ideas how to help then please let me know and I would be more than happy to try it and report back my findings right away. We have hitched our horse to the Ionic platform so I am personally invested into helping make Ionic work great for everyone.

Thank you in advanced for everything!


#2

Hi @bashirs,
do you have any new insights about windows slow performance ?


#3

@bashirs I am also interested if this has changed or if you found a way to improve this.


#4

I did some basic testing to see where the bottleneck could be.
Here is what i did.

I used the super template created by ionic and then:

  • Build it and put it on the device ( Lumia 950 )
    Very slow click performance and suttered page transition animation
  • Build it with the target browser, but it on a webserver and opend it in the device browser
    Very slow click performance and suttered page transition animation
  • Build it with the target browser and packed it as a Microsoft hosted Wep App ( https://developer.microsoft.com/en-us/windows/bridges/hosted-web-apps )
    Very slow click performance and suttered page transition animation

In comparison i build a pure Angular 2 App to see if the general performance on Windows 10 Phone is bad ?
I opened this app in the browser and packed it as a Hosted Web App.
The results are very smooth and fast.

So i guess it has something todo with Ionic or Cordova?
I would really love to use Ionic 2 for true cross plattform development, but it is not useable in this state.

Anyone here has managed to get it to work on windows 10 phone?


#5

Does this helps?

http://scottbolinger.com/4-ways-to-make-your-ionic-app-feel-native/


#6

thanks @stanchiam I will take a look.
But it s a general problem not only reflecting on the transitions, as every click, even if it s just a button press, has a very bad response time. This applys to very simple / basic apps, where you just have one button that leads to a new / blank page. It looks like there is some ionic problem in connection with the windows platform. It i build something simular without ionic, just angular 2, everything is super fast.
I really hope that the ionic team will take a look at this on an actual device.


#7

Hi there - is there any progress on this issue as of late? I have clients interested in Windows 10 platform, and using Ionic2, but this is a show-stopper issue. Would like to hear if any plan on the pipeline to improve this?


#8

Windows Phone 10 or Windows 10? This thread is about the phone variant.


#9

I have not noticed any movement about this issues. Indeed its only affecting the windows phone version, but to me it s also a show stopper for 2 projects. I have created a issue on github about that.


I would love to see this problem fixed but it looks like the interest in making ionic true cross platform including WP10 is not so high? I still have my fingers crossed that this will be sorted.


#10

We experienced the same on Windows 10 also, not Windows phone 10. Clicking on controls, like radio buttons take 2-3 seconds delay in response


#11

This post was flagged by the community and is temporarily hidden.


#12

@ncao Interesting. I only have it on the phone. Just to make sure i build the “super” template from ionic2 and installed it on my win 10 desktop. it runs fast and smooth with no flickering and delays etc. I only have this problem on my phone.


#13

This post was flagged by the community and is temporarily hidden.


#14

Is this the “super” ionic2 template you mentioned https://github.com/driftyco/ionic-starter-super?
Kind regards,


#15

@ncao I run it as an app installed on my win 10 desktop and i also tried it in the edge browser on the desktop. Both work fine! But not on the phone.

The Template i used is the one you get when you du
ionic start myTestProject super --v2


#16

This post was flagged by the community and is temporarily hidden.


#17

Maybe. I don t have any low end device to test the performance hit on for win 10 desktop.
For me it s hard to beleave that it s e Edge problem, as this browser is usually very fast. I am sure there is something specific to ionic that is causing this performance hit on this browser.
I tested something simular with just a angular 2 app without ionic. Which is super fast and does not show this problems at all.


#18

Can you try with this one? https://github.com/driftyco/ionic-conference-app
It has more controls and much more complex than the starter


#19

If one of you posts all CLI commands and changes needed to build for Windows, I am happy to try, too.


#20

Hi - Just try this,

  • Clone this repository: git clone https://github.com/driftyco/ionic-conference-app.git.
  • Want to use TypeScript? Both the master branch and the typescript branch now use TypeScript.
  • Run npm install from the project root.
  • Install the ionic CLI (npm install -g ionic)
  • Run ionic serve in a terminal from the project root.

but instead of running ionic serve on Chrome, try it on MS Edge and see if the performance is good or not.
Kind regards,