RC0/1 - High idle CPU usage on iOS 7 (iPhone 4)

ionic-v1
1

Hello,

today I updated from v1.0.0-beta.14 to the new released v1.0.0-rc.1. Then I tested the app as always on my iPhone 4 (iOS 7) and noticed a huge CPU usage in idle mode (when no interaction in the app occurs). Keep in mind that I did not change my code. I just updated the ionic libraries (js, css, fonts).

The first screenshot shows the cpu usage with v1.0.0-beta.14 in idle.

image
Beta14.png1114Ă—794 104 KB

The second screenshot shows the cpu usage with v1.0.0-rc.1 in idle. I also tried it with v1.0.0-rc.0, but it was the same.

image
RC1.png1208Ă—930 239 KB

It seems as if timers are using a lot of cpu time.

Is this behavior known with v1.0.0-rc.1/v1.0.0-rc.0?

Thanks!!

2

Did nobody experience the same issue on iPhone 4? This issue prevents me from updating to the newest ionic version :frowning:

3

If I remember correctly, it wasn’t until iOS8 that they really optimized the browser. I don’t remember many specifics but I know they made quite a few changes in how caching and rendering works to better keep websites/hybrid apps from doing this.

If this wasn’t haooening with Beta 14 I would maybe try and pinpoint the cause of usage? I believe chrome and safari have tools to see exact functions or points that are running. I’m on my phone now but I can find that for you when I get back to my computer later.

4

I was able to pinpoint the cause of the high cpu usage now. The bottleneck is the SVG spinner and the ionicLoading. When I remove all SVG spinner from my code then the app has a cpu usage of 0% in idle. If I add the spinner again, the cpu usage is around 15-25%. I think the problem is, that after the ionicLoading is hidden and not used anymore, the SVG html element is not removed from DOM and therefore webkit is rendering it (as a hidden element).

On this screenshot you can clearly see that the rendering engine updates the SVG element all the time, even if it is hidden in DOM.

image
image.png1172Ă—922 229 KB

I was able to reproduce this bug with a blank ionic template and a simple ionicLoading statement. Ionic Team, could you please have a look at this problem on iOS 7 (iPhone 4). I think this bug affects a lot more people!

Best Regards,

Bernd

3 Likes
5

Did you get any solution for this high cpu usage?

6

I simply replaced the SVG spinner with a .gif loader:

$ionicLoading.show({
    template: "<span class='loader'></span>"
});

Not the best solution but at least it works with iOS 7.

1 Like
7

This is still a problem in rc4 and the Android Studio CPU profiler shows it quite clearly. CPU usage is around 2% until the first time a spinner is shown and then it will remain at 50% forever after.

8

CPU usage remains at around 50% because the SVG spinner is never removed from DOM or “stopped”. Unfortunately as long as this bug exists, I can not use the SVG spinner and need to replace it with a .gif spinner (which does not look that good though)

9

Looking into this, thanks for pointing it out. Will continue on the issue

1 Like