Ionic-framework: Windows phone performance issues

[vaskou]

Short description of the problem:

The animation of side menu in my windows phone device (Microsoft Lumia 950) is not smooth.

Which Ionic Version? 1.x or 2.x
Ionic 2-rc.1

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS:
Node Version: v6.7.0

I did some testing and I managed to make the animation of menu smoother by disabling the animation
of the ion-backdrop element in the ion-menu, by using this css

.platform-windows ion-menu ion-backdrop{
opacity: 0.35 !important;
transition-duration: 0ms !important;
}

This problem is only visible in windows phone 10 devices. I think is problem of the Microsoft Edge browser engine in mobiles, because in Windows 10 PC the animation is very smooth.

An other thing I noticed is that on windows phone in landscape, the animation is smoother than portrait (without my css changes).

[manucorporat]

Well, obviously performance problems affect slower devices. We might evaluate a low-end mode for ionic, disabling animations across the whole UI.

[vaskou]

Yeah but Lumia 950 is not a low-end device. It's Microsoft's latest flagship with Hexa-core Qualcomm
Snapdragon 808, and 3 GB Ram. Maybe if you could test it in your Windows 10 Mobile device. If there is not a problem in your device then there is something wrong with mine. My app is based on your side-menu template.
Thanks

[manucorporat]

oh! I see, I don't have one Windows 10 Mobile Device. Thinking...

[graphefruit]

@vaskou After I came across this point with my app for iOS/Android/WP I can say you, that its not the problem of your device, rather the Webview performance.

I got:

• Lumia 820 (Windows Phone 8.1)
• Lumia 550 (Windows Phone 10)
• Lumia 950 XL (Windows Phone 10)

Funny fact: Lumia 820 was faster then 550 or 950XL.
The WebView when building the WP8-App, was much more faster then a WP10-App on the Lumia 820.

Conclusion: Webview is the problem, not the device
@manucorporat Maybe you can take this into account aswell.

My performance settings for windows-phone:

I've come a long way to speed up my Windows-App in Angular 1 but there are still some points which could/should be watched in Ionic with Angular 2 aswell:

• Less CSS
• Nearly no animation
• Excluded border-radius, box-shadow
• .class instead of myElement-Style

Greetings

[vaskou]

That's what I thought.
Probably the Lumia 820 is faster because Windows Phone 8.1 has Internet Explorer 11 Webview, while Windows Mobile 10 has Edge.
I hope Edge becomes faster in future Windows updates, or Ionic 2 animations be updated so they can run smoother.

[graphefruit]

Lumia 820 had IE10 not IE11.
And maybe they'll get faster in 2 or 3 years, but that wouldn't help for now thats the big point.

Update:
By the way, testing your app inside the virtual-devices you'll have a good performance, the problem will come up on real devices.

[mtycholaz]

@graphefruit

By the way, testing your app inside the virtual-devices you'll have a good performance, the problem will come up on real devices.

I just started testing on a Lumia 650 with RC1, and have noticed considerable performance difference from the emulator. Sluggish, janky, and slow. For now I'm chalking it up to the fact that I'm programming in RC, and the very real possibility that the ionic team probably gives more attention to iOS and Android than Windows.

[nghiacc]

@jgw96 : Pls do note the issue also happen on Windows 10 PC (via App or MS Edge browser as well), not just on Windows phone. Thanks for finding and linking existing issues!

[jgw96]

Hello all! I am going to close this issue for now as it has been a while since there was any conversation on this issue and also because performance improvements are an ongoing thing for us. Thanks for using Ionic everyone!

[nghiacc]

Hi @jgw96 - the performance issue is still there, I think the lack of interest maybe no progress has been made from Ionic team. Currently the performance is not at acceptable level, so even though this is on-going activity, you should make it into an acceptable level first, without that, saying Ionic is supporting Windows 10 is an overstatement.

[napcat]

Hello,

I'm facing this problem right now... I don't think this is solved in any way.

I was building an app for a client for android, ios and windows... Windows was the last platform requested by the client, but at this time I can't publish it because the performance is very bad. Every click takes at least a half of a second to do his action and the transitions seems broken.

[graphefruit]

@napcat I'd suggest you open a new issue, because I think this will not be watched frequently anymore here.

Also for your transitions: I don't know which transitions you use, but you could disable some of them, like the switching transition of pages. This is what I did in iOS and Android aswell, because older devices still had laggs.

Did you already migrate from 2.0 to 3.0? I've dropped windows-phone support in 2.0 when releasing my app in April because of the performance problems.

After that 3.0 came out, but after reading many posts it will face a better startup time, but I don't think it will handle much the performance inside the app (even though the app is smaller).
Greetings

[napcat]

@graphefruit For example in my test device, a Nokia Lumia 640 XL, the app only runs if it's in --prod mode.
If not, it lakes too long to start and eventually Windows Phone OS will force close the app.

I'm build in the latest ionic version 3.2.1.

The startup time in prod mode is relatively good, but inside the app the user experience is very bad.

How can I disable globally all the animations if the platform is windows?
Is it configurable by platform?

[tryadelion]

@jgw96 this issue still happens, please reopen

[bolivir]

Noticed many issues reported about the windows phone performance, the performance inside the app is really bad and cannot be released. Clicking something inside the app feels like there is a delay for 2/3 seconds before registering the click.

Do we have any news about this issue?

[tenglandct]

Hi @jgw96

To echo the above comments, we are still having critical issues with performance on Windows Phone 10, to the extent of it being unusable and certainly not something we can push to the Windows Store for general release. In fact as far as I can see, Windows Desktop UWP also has this problem, but increased grunt from the hardware saves applications from the worst of the performance loss.

I have prepared a very basic project (attached) for replicating these issues with emulates a part of our application which is particularly badly affected (multiple list pages pushed into the nav stack). On Edge (which is a pretty good proxy for Windows UWP desktop performance I have found) it is slower than ideal (and a lot slower than the previous version of our application built on JQM!!) but useable. On Windows Phone it is very slow indeed. I have attached a GIF recording of a screen projected Nokia 950XL – it is a little difficult to tell but I am pressing buttons as soon as they are rendering, there is quite a lag before the loader appears. The issue only gets worse the larger (in DOM terms) these screens become.

I have run the pages in Edge’s performance analyser, which I’ve discovered is actually pretty damn good, and results are attached. To view the diagnostic session info attached, you can open Edge’s developer tools > click on Performance tab and click on Import profiling session (which is next to the record and stop profile session buttons in the toolbar near the top of the screen). As you will be able to see from the diagnostics, the main issues (at least on Edge but I think these are likely to be the same issues) are 2 fold:

• layout and style calculation (can take up to a second)
• click handler (specifically the part which actually goes through and modifies the DOM).

Both of these issues obviously scale with the size of the pages and is particularly problematic with large lists. In one use case of our application, we might have 900 items in a full page list, after waiting for over 20 seconds we gave up and killed the app!

Once pages or components are loaded performance tends to be OK-ish, which further goes to suggest issues are around the approach to DOM manipulation and CSS layout painting being sub-optimal for Edge?

I would be very happy to try any other replications steps you would like me to, or possibly bulk out the example project with additional pages testing demonstrating other performance issues.

Thanks
Thomas

I am not entirely sure whether the files uploaded so here are the links in OneDrive:
Edge Performance Log and Windows Phone GIF:
https://crimsontide2-my.sharepoint.com/personal/thomas_england_crimsontide_co_uk/_layouts/15/guestaccess.aspx?docid=19277b0e20fba47719ec562af99374e66&authkey=AfHxhwGfL_YP4ZS6xKJUvmE

Project:
https://crimsontide2-my.sharepoint.com/personal/thomas_england_crimsontide_co_uk/_layouts/15/guestaccess.aspx?docid=1a8067b5af4d04ae5a3814db84ddd2d39&authkey=AWzYP8KG2qv6_uwEVUD9VHM

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