How to optimize the performance of iphone 4 and 4S?

I tried my app on iphone 5 and it run great. However, it’s so slow on iphone 4 and 4S. Maybe ídue to the limit of hardware? How to get things smoother on them?

Most issues I’ve noticed arise from having too many angularjs watchers created on array items. I suggest looking into Bindonce as we often don’t need the watchers on the array items themselves, only the array.

Another thing I noticed is that ionic animations when transitioning from one state to the other only work properly if the new state doesn’t immediately have a lot of CPU intensive tasks. I noticed this when I was able to speed up our back-end and it pushed the information to the app so fast that handling the data started before the transition was complete.

Try Fastclick. This may help you, https://github.com/ftlabs/fastclick

Bindonce is definitely a good solution t o prevent unnecessary watches. Don’t use Fastclick though, Ionic is already using its own implementation to prevent the 300ms delay on mobile devices. Check out this post, a bit old, but it explains the 300ms

http://ionicframework.com/blog/hybrid-apps-and-the-curse-of-the-300ms-delay/

2 Likes

I am hitting issues with the iphone 4 view animations taking about a second before they start. there are several small lists on the page (containing 3-5 items) i am trying to transition to which i have tried with bindonce to see if the watch number can be reduced. the lists are only about 5 items long though so I don’t really see great performance improvements.

What I am wondering though is: is it possible to trigger the view transition immediately with the acceptance that they target view will not be complete to avoid this delay? I can’t seem to find an obvious way of doing this. Removing the ‘animation’ attribute from the nav-view, obviously removes the animation then the transition is immediate.

I could then at least style the target view progressionally loading to make the elements appear reasonably nicely but currently with the delay in triggering the view transition animation it makes the app feel very unresponsive on iPhone 4 like devices.

1 Like

I can confirm this problem with the view transitions taking especially long.
Maybe this is a quite good idea, to fire the transition, even when the content is not completely loaded yet.

I can confirm this too. We’ve had a lot of problems with Android and iPhone 6. We have found the performance of page transitions very sluggish on iPhone 6.

Sluggish on the iPhone 6? - wow if you can send me phone over I’ll promise to help you with the performance :smile:

I have created a seperate thread about this as I think the fact that the DOM is being destroyed after each transition isn’t helping things…

we have tried some hacks like putting some content in ng-if statements that aren’t resolved until $viewContentLoaded if fired but you get staggered loading and looks awful on tablet.

iOS6 of course, you know what I mean! Everyone’s a comedian on this forum :slight_smile:

Old post but it might help someone:

When I removed the page and nav-bar animations the performance on iPhone 4 got ALOT better, almost like on the iPhone 5.
(Edit: It seems like the nav-bar animation doesn’t impact that much)

With the aninations the CPU (from xcode) went to +100% in every page transition, without them it stops at ~20%.

I’m using the tab starter template with not many modifications

How do you disable the animations?

1 Like

In the ion-nav-bar you can remove the .nav-title-slide-ios7 and on the body tag set the animation attribute to “none”. Both are located in index.html with tabs starter template

Is there a way to do that?

Any updates on improving performance on iPhone 4? Also experiencing considerable lags on animations, page transitions, image loads as compared to newer iphones or Android.

Some useful tips to improve performance of Ionic Apps.
here and here. It may help you.

1 Like

Also need to remember: iPhone 4 / iOS6 and even iOS7 are going to be slow because that hardware has about half the computing power that the new phones have. There are some cases where even a lot of optimization won’t get rid of certain lag because the phone simply can not move faster than how it’s designed.

There have been some great tips in this thread though, these are good things to implement even for newer devices.

Just to add one more technique…
If you are using ng-repeat, try using track by. It really improved the performance of my lists.
you may find more info in this blog post.