"cross-platform mobile apps" performance

Does any one have any experience with those "cross-platform mobile apps framework" such as PhoneGap or Titanium Mobile?

How big is the performance difference compa开发者_如何学编程red to the native Java (for android) or Objective-C (for iPhone)?

There are pretty big differences in performance... but with some knowledge... (one evening of reading)... you can combat them and leverage your knowledge in HTML/JS/CSS to get apps up and running quickly.

Here are some nuggets:

PhoneGap/Mobile Web Performance Tips

* How Diary.com increased the performance of their PhoneGap app running Sencha: http://www.phonegap.com/2011/06/21/building-the-diary-com-ios-app-using-pg-sencha-touch/
* http://floatlearning.com/2011/03/developing-better-phonegap-apps/
    * http://jslint.com/ - to debug your javascript
    * http://zeptojs.com/ and http://xuijs.com/ - minimal alternative frameworks to jquery and jqtouch

* Disable the accelerometer and location http://blogs.nitobi.com/jesse/2009/10/28/running-jqtouch-in-phonegap/
    * set “EnableAcceleration” to false in PhoneGap.plist
    * set "AutoRotate" to false in PhoneGap.plist

* http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/
* http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone
    * Demo: http://cubiq.org/dropbox/clickdelay.html 
    * FastClick v TouchStart: http://groups.google.com/group/phonegap/browse_thread/thread/f5f5c78e26513821?pli=1
    * http://forum.jquery.com/topic/ontouch-instead-of-onclick-event

* http://wiki.phonegap.com/w/page/16494809/Performance-tips-for-device/
* http://www.developer.nokia.com/Community/Wiki/JavaScript_Performance_Best_Practices
* http://evolvingwe.com/building-an-iphone-app-part-3-7-dev-tips/
* http://evolvingwe.com/upgrading-to-phonegap1-0/
* VIDEO Performance Tips for Sencha Touch: http://vimeo.com/17882927
    * It covers performance features in Sencha, which are great principles we can reapply. We may even be able to cut code from certain pieces of Sencha to reapply for Skej.
    * It states that we MUST destroy anything that is not visible on the DOM. And that the DOM must be kept as small as possible at all times, with as few listeners as possible. (I.e attach one listener to the parent item of a list, rather than to each list item.)
    * It also has practical CSS3 tips for me to apply... Basically, dont use many of the new transitions and shadows/round corners because the currently use CPU, and not yet GPU. 

* Event Delegation in Sencha Touch: How to design lists with a single listener, and not one on every line. http://www.sencha.com/blog/event-delegation-in-sencha-touch/
* Optimizing DOM Memory Usage in Sencha Touch: Sliding from a List to a Details panel and killing the list, and then sliding from Details to a List and killing the details panel. Minimizing elements on your screen, your DOM. http://www.sencha.com/blog/sencha-touch-optimizing-memory-usage/
    * DESTROY ANYTHING THAT IS NOT VISIBLE ON YOUR DOM!

* Use CSS Animations instead of jQuery

    * http://nyroo.com/l/B7UN5c
    * http://www.ferretarmy.com/css-animation-examples/ 
    * Be careful... these are tricky when they don't leverage the GPU, and bog down the CPU.

Enabling New Functions

* Enable Retina Display: http://evolvingwe.com/create-retina-display-images-in-mobile-web-themes-and-phonegap-apps/
* Swipe to delete: http://www.codesta.com/blog/2011/5/23/sencha-touchphonegap-tips-and-tricks.html
* Disable accelerometer and location: http://iamcam.wordpress.com/2009/10/29/phonegap-up-to-speed/
* Cut jQuery and Hand-code: http://cubiq.org/do-you-really-need-jquery-for-mobile-dev
* Display Contact List in Mobile Safari: http://cubiq.org/contact-list-on-webkit-for-iphone
* iScroll4: Create a header, scroll within a fixed size div, pinch and zoom, pull up/down refresh. http://cubiq.org/iscroll-4 (Includes tips on rubber-band effect.)
* PhoneGap's GitHub repo: Includes interesting examples like DatePicker, SMSComposer, ApplicationPreferences, Splashscreen, NetworkActivityIndicator... https://github.com/phonegap/phonegap-plugins

Architecture

Architecting your App in Ext JS 4: http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2

Easy way to see for yourself for a Phonegap application is simply to use the browser on both handsets for your application, a great demo app would be the jquery mobile demo available at http://jquerymobile.com/test/

I believe Titanium is faster at the expense of having to learn their Javascript framework, because it does compile to native code.