Android will provide some tools in the dev settings that help you optimizing the performance of your apps. You can display “overdraw” information and see layout borders. Both options can help in improving your app performance.
Layout complexity
One bottle neck is the complexity of your layouts – especially in ListViews or TableViews where you have the same layout multiple times. Nesting many elements can help you placing your objects in your scene but it will reduce the performance quiet a lot.
If you can: try to reduce child elements and put your elements in your parent.
Also: using a horizontal/vertical layout will reduce the performance slightly since it has to calculate the space for each element. It might be harder to remove that but if you just place a text below a single line headline you can use top values instead of a vertical layout.
Most of the time you will have some elements that are only visible for e.g. users that are logged in. Instead of hiding them you can remove them completely: $.window.remove($.element)
To see all your views and bounding boxes you can switch on: settings -> developer options -> “Show layout bounds”
This will help you to position elements and you can see empty boxes for elements that are loaded but not rendered.
Reduce overdraw
Another area that will help to improve performance is reducing overdrawing in your app. Android says:
An app may draw the same pixel more than once within a single frame, an event called overdraw. Overdraw is usually unnecessary, and best eliminated. It manifests itself as a performance problem by wasting GPU time to render pixels that don’t contribute to what the user sees on the screen.
https://developer.android.com/topic/performance/rendering/overdraw
If you enable the overdraw feature settings -> developer options -> Hardware accelerated rendering -> Debug GPU Overdraw -> Show overdraw areas you will see a colorful screen with good or bad areas:
It will show you how often a pixel is redrawn which is bad for the drawing performance: red = 4x+, green = 2x, blue = 1x, original color = no redraw. Of course we are trying to go for the lowest number! To do that we just remove unnecessary backgroundColors: remove ListView backgrounds, ListItem backgrounds, ScrollView backgrounds if your window has the same background color.
Crossing the bridge
And old but still valid optimization is to reduce the number of “crossing the bridge” calls. Every time you change a property that will change UI elements Titanium will go from native to JS and back. Instead of changing multiple properties after each other you can call applyProperties({}) and pass a list of all properties to it.
Changing from Ti.App.fireEvent to Backbone events (e.g. with this tutorial) will help to reduce crossing the bridge since it will handle all events inside JS and not through the SDK.
Other tips
Minimize the initial code that is executed when you create a controller or alloy.js. Try to do the heavy stuff inside the open event and present a loading indicator. That way the window opens quicker and it feels better for the user.
Latest SDK
A last tip is to make sure that you use the latest SDK. Besides bugfixes and new features there are always some performance improvements. That will boost your performance without you doing anything 😉