Anyone have any problems with iPhone slow rendering?
i'm writing an app but finding the more complex that it gets the slower it is to render on the iPhone. Once it renders the performance is excellent but it's just mind boggling slow to render.
I've done a lot of testing on the various parts of the app and Parsing and executing the JS all seems fine but rendering (drawing) the elements in the browser is very slow. I'm not sure exactly where the JS ends and the rendering starts but it seems that it's build the background objects and parsed and built the Xtemplates.
I have an iPhone 4 and 3 and a Samsung Galaxy I and an HTC Desire (both running Android 2.2).
the same app on the Androids takes about 5 seconds to load and on the iPhone 4 it is taking over 30!!!! the iPhone3 over 40.
I expect the iPhone 3 to be slow but it seems mental that the latest iPhone is struggling so much when compared to these older phones. Is it possible that the
in the meantime i'm going to look deeper into the sencha src code to see if i can see if this is actually JS or to see exactly when the browser is told to render.
anyone have any thoughts or benchmarks times of their apps?
on another days worth of playing around i'm finding that it's actually half and half render time / JS compile time of sencha-touch. Basically the iPhone safari JS compiler is nowhere near as good as the Android - by a factor of 4-1 by a lot of benchmarks i've seen.
I still seem to get 'holes' in the rendering where nothing seems to be happening and the app seems to hang (only way i can prove this is by implementing simple console clock timer and using a stop watch to time the results!!) whilst it's either compiling the JS or rendering the components. There seems to be a missing '10 seconds' of compile or render time when i can't seem to ascertain what or where this is going on.
With regard to the console logging, the Desktop obviously handles this fine but on the iPhone it struggles to even dump the console messages when you'd 'expect' them to go out. It seems to buffer and then flush them once it's finished an entire task - which isn't much use when you are trying to performance tune or work out where bottle neck is. Very difficult to know exactly what is going on under the hood as i didn't build the sencha framework and i'm having to traul the src to work out where the bottlenecks are so i'm just hacking away.
Been looking into minifying the sencha-touch JS further as it seems that compile per method is linked to the size of the actual file. So right now i'm rebuilding sencha-touch with JSBuilder taking out all the components that i don't need but its a pretty painful experience when you don't know the dependancies :-S.
I've made significant improvements to my code (my DOM has reduced by approximate 50%) and have the sencha JS about 2/3 of what it was but i'm still not really getting the results. All my js is minified.
anyone shed any more light on this as i'm not even close to being an expert on compile and render?
I also tried to remove some components from Sencha Touch but every time I remove something which I think I'm not using, something breaks. I was wondering if there are any tools that could do this automatically or at least some tips on how to do it better.
hitman01 - it seems there aren't any tools...
it's a trial and error if you are playing around with the jsb3 builder.
i posted a few other things around jsbuilder so look around.
i started with data - i know i'm not using XML and only require JSON reader
i know i'm not using the plugins
and i have no form components at all (there are loads of form widgets you can dump)
then just start slowly stepping through and thinking about each case.
look at the widgets - are you using TabPanels for example?
are you geolocating / maps?
are you using pinch gestures?
any media requirements for video / audio?
as far as my app is concerned i've got the rendering down from 30 seconds to about 7 - i'll blog it when i'm finished.