search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.03k stars 13.51k forks source link

Ionic2 very slow on Windows Phone 10 #10009

Closed bashirsouid-ms closed 7 years ago

bashirsouid-ms commented 7 years ago

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

I'm submitting a ... (check one with "x") [X ] bug report [X ] 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: Very slow performance when switching tabs, rendering pages, etc. It is slow in general and worse for more complex templates. [Demo: Youtube Video]

Expected behavior: Expect faster behavior for user touches, navigation events, etc.

Steps to reproduce: 1) Clone the latest version of the "Ionic Conference App" (RC5 release) 2) Build for Windows universal platform (ionic build windows) 3) Install or run on a Windows Phone device (I am using Lumia 830) 4) Note slow performance when switching tabs/views

Other information: I have done a more extensive write up and included profiling traces in this forum post: https://forum.ionicframework.com/t/ionic2-very-slow-on-windows-phone-10/76051

Ionic info:

Cordova CLI: 6.3.0
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.1
Xcode version: Not installed
bashirsouid-ms commented 7 years ago

Sorry, I am not familiar with the project processes. Is this labeled as low pri because it is a performance issue or because Windows Universal is not one of the primary platforms? Thank you.

bolivir commented 7 years ago

Hi,

Ive got the exect same problem as you describe. On android its working fine but on windows its just terrible slow. ive read on multiple pages that they support windows but thats all. Because i dont see any comments/tips or fixes for windows in general i think windows is low prio for the ionic team. Im fixing things for like days, because the customer needs windows and this is really annoying. If i would have tested the app earlier on a windows device i dont think i sticked with ionic 2

graphefruit commented 7 years ago

@mhartington could you please give us feedback why this is 'nice to have'? The demo points out a realy big performance issue on Windows phone. UWP is the main project even on Windows side. I need to support Windows phones as well, but I don't want to give my users such a slow experience. Thanks in advance Grapefruit

hirtenfelder commented 7 years ago

Yes, Ionic on Windows 10 is terrible slow.

graphefruit commented 7 years ago

@jgw96 or @mhartington Could you please give us an update on this, why this is just "Nice to have?"

The animations, the transitions and the page change events are realy slow. I've already tried to change the config to:

activator:'highlight',
pageTransition:'',

Everything I'm touching on my UWP feels like hiccups, the user thinks the application is feeling like: Always lagg. The pressing of a menu-icon takes about 500ms to 1s, and after this the page changes.

Is there any possibility to disable all transitions/animations? One good help would be to disable global the floating in/out of the menu, and the animations of page changing aswell? Also the scrolling feels very choppy in a larger menu, when you swipe down or swipe up with your finger to scroll, it takes about 500ms and then the scroll is executed.

Thanks in advance & I'm always happy to help here Graphefruit

mhartington commented 7 years ago

The label is just to note that we need to work on this, but it is not a out-right broken issue. Things "work", but are just slow. It's something that we've seen, but still need to figure out where the bottle neck is. Is it ionic related (which it doesn't look like it is) or polyfil related.

P4 means that it's not a major refactor or complicated issue.

graphefruit commented 7 years ago

Thank you for your update and honesty! That clarifies it! To be honest the label is a little bit misleading ;).

thiboot commented 7 years ago

I have a Lumia 950XL wich is the best of Windows 10 phones in terms of performances and i have the same problem. My app is very slow, with transitions, page rendering etc. compared to Android & iPhone versions. On Windows 10 Desktop, no problems very fast...

almost92 commented 7 years ago

@mhartington can you please share the timeline on when will you guys start looking into these performance issues on Windows? Thanks

manucorporat commented 7 years ago

We are using the best approaches for rendering performance, seriously, everything you can possible imagine.

The build team is working hard to reduce the build size drastically and the angular 2 team at google is doing the same.

I don't know which magic trick to "optimize" for windows do you expect, this is JS, CSS and HTML, there are not "windows" optimizations.

If Chrome and Webkit are doing much better than windows is probably something related with IE/edge.

Which WebView is your app using? IE or edge?

a1development commented 7 years ago

I have the same issue. I don t think that this is a general "edge browser" issue. When i do similar stuff and use the browser to display it, its blazing fast. When i do the same and pack it as "Hosted Web App" https://developer.microsoft.com/en-us/windows/bridges/hosted-web-apps .. its fast. So responding to click events on webpages or inside html css js apps in general is not slow in windows 10 for phones. But when i do very basic stuff with ionic 2, or even just install one of the templates provided by ionic, the animations look broken and the response time is way up. At this level you can not use it / sell it a client. I think this is a real issue. 

nghiacc commented 7 years ago

I agreed with @a1development . This is not an issue with pure app built on Angular2 running on Windows 10 machine. Only when using Ionic2, then there is a significant degrade in performance in comparison with Chrome or Opera browser, also in the same Windows 10 machine. Here the video I made for comparison, built on the same Ionic Conference App. At first I click through the menu items on Opera browser (similar performance on Chrome). It worked fast. Then I tried on MS Edge, there is a considerable delay between clicks: https://youtu.be/pA8bvHQiSWk

In my app where I use more control, the performance is even worst, it takes like 3 seconds just to select a radiobutton. I think this behavior is not acceptable for a good customer experience, and I think I have to the solution if this still persists.

digaus commented 7 years ago

Did you try updating cordova? For me it is working perfectly fine on Windows 10 UWP with cordova 6.5

a1development commented 7 years ago

If i do ionic info i get this: ordova CLI: 6.5.0 Ionic Framework Version: 2.3.0 Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Ionic App Scripts Version: 1.1.4 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 10 Node Version: v7.5.0 Xcode version: Not installed

So it looks like i am using Cordova 6.5? Or do i need to update something else. This thread as some videos and examples further down that shows the problem very good. https://forum.ionicframework.com/t/ionic2-very-slow-on-windows-phone-10/76051

Looks like it is a general problem, that you can reproduce even in the Edge Browser compared to Chrome on Desktop aswell.

nghiacc commented 7 years ago

@digaus yes I tried Cordova 6.5, same issue. Did you try the conference app? It would be great if you can share the build procedure and ionic info.

digaus commented 7 years ago

Currently only testing on pc since I need to fix the certificate error on the phone when fetching data from our api. Building the app for windows x64 with Visual Studio 2015... will check tomorrow.

graphefruit commented 7 years ago

Testing only on PC won't show the problem. The emulator doesn't behave like a normal device, on emulator and on PC it's running normal, but the problem will occure when you compile and install the app on your phone. BTW if you do it, don't debug via visual studio because the debugging will slow it down even more

digaus commented 7 years ago

It is not on Emulator! It is build and run directly as a Windows UWP App... I know Visual Studio slows it down but it is still ok while debugging.

graphefruit commented 7 years ago

Yes but it runs directly on Windows system not on the phone. Both methods are fast. But not on a real phone device

digaus commented 7 years ago

At least the login page was fast aswell on the phone, could not test further yet because of self signed SSL Certificate which Windows Phone automatically blocks. And @nghiacc mentioned that it is also slow on PC...

nghiacc commented 7 years ago

@digaus - correct it is also slow on PC too. Pls check my video posted earlier, you can see significant difference between Opera vs MS Edge (Cordova apps run on MS Edge Chakra engine). Pls try and let us know

digaus commented 7 years ago

@nghiacc Building and running for Windows 10 UWP (x64) with Visual Studio works perfectly fine and is as fast as on android. However I can confirm that the click events are really slow on a Lumia 650! Scroll and swipe events seem to work fine thought and the transitions are also very fluid on mobile.

Lumia 650: https://youtu.be/7LLIvrhZh5Q

Your system information:

ordova CLI: 6.5.0 Ionic Framework Version: 2.3.0 Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Ionic App Scripts Version: 1.1.4 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 10 Node Version: v6.10.0 Xcode version: Not installed

windows10uwp

nghiacc commented 7 years ago

Thanks a lot @digaus ! Yes it does look good on your video. Are you using Visual Studio to build the app instead of Ionic build command?

digaus commented 7 years ago

@nghiacc Yes I followed this tutorial to be able to use Visual Studio: https://taco.visualstudio.com/en-us/docs/tutorial-ionic2/

But it uses outdated versions which I updated manually via the CLI.

But even when building via the CLI it still runs as smooth, so I do not think that this will help.

a1development commented 7 years ago

@digaus In the forum link i posted earlier, someone had a link to the conference app. Could you please open this in Chrome and Edge and let me know if it feels exactly the same? https://nghiacc.github.io/ionic-conference-app/

To me in chrome its fast, in edge ( and when i build it as an app on windows ) its noticeable slower.

digaus commented 7 years ago

@a1development Edge is slower on schedule and speaker... then I tested my app and with more list elements (>50) it also gets slower and response time is not great even with a virtualScroll list. Performance on android is still great though.

digaus commented 7 years ago

Created an issue: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11555978/ Will see what they say...

a1development commented 7 years ago

Great! I just added a "report" count to your report. Hope that one side ( ionic team and or microsoft ) takes a look at it.

nghiacc commented 7 years ago

Me too :). Thanks for opening up a ticket.

digaus commented 7 years ago

Found this issue there: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7303717/

Might be related to our issue...

jgw96 commented 7 years ago

Hello all! Thanks for all the input, it is extremely helpful. After further review and in an effort to consolidate issues so we can prioritize them better I am going to close this issue as a duplicate of https://github.com/driftyco/ionic/issues/8710.

ionitron-bot[bot] commented 6 years ago

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.