Question

I am working with flex for the last two years on some desktop apps. Until now I never had any performance related issues but today as we completed a mobile application for the iPad, I’m facing a challenge, the application is incredibly slow on the iPad.

https://i.stack.imgur.com/qkbWn.png

Slow, means that when I press a button in the menu to change the splitview I must wait something like 5s. Then scrolling is really slow two, with less than one fps and my TextInput starts to bug (the text is not in his box anymore).

I started to read a lot of blog post and presentation about optimisation for the mobile platform and then I rewrite some of the components I use. I removed the SkinnableContainer for instance and replaced it by a VGroup including some actionScript based drawing.

Now what you see is a VGroup (the dark grey one) containing some others VGroup (the group with title here) and then each widget is an HGroup with a label and a Widget. I only use Label and TextInput for the text.

Creation time is slow even (several seconds to create the view) for another page where there is only 4 text widget on it, or another one with only a list with a custom item renderer where each row is a set of 4 labels.

The whole things is cabled with RobotLegs, with nothing fancy, one models is injected in the view and at the beginning I set a member variable on the view with this object to bind my variables.

Frankly my thinking right now is : it smells fishy because if I’ve done everything right it is impossible to have such low performance and thinks that flex is competitive on the mobile platform. So right now I’m trying to disable the application piece by piece to try to locate what could slow it like that. I’ve got a couple suspects to check, for instance I’ve got some binding warning to check, and then see if robotlegs has got its share of the problem.

So my main question here is what do you think, and could you have some ideas about “is there a problem” and “how do we solve it”.

Thanks

Answer 1

1. Run profiler for startup and separatelly for each operation that takes longed that it needs. Then prioritize the problems and try to solve them with basic optimization techniques.
2. Some problems you will not be able to solve fast – e.g. time for creating big components. The only option there is to rewrite those components with AS3 without MXML, styles and anything. I’m sure that flash.text.TextField is created many times faster than mx.controls.Label. The same for other components.
3. When component is created, it can be reused at a very low price. In your app there must be a lot of places where you recreate while you can reuse old components. It will save you memory and time.
4. Layouts tend to redraw even when it’s not needed. If you have a lot of nested layouts, find the most critical places and replace a series of layouts with one custom layout or even component.

This all is very developer time consuming. At the end you will not get a smooth app anyway, but I believe that it can become usable.