¿Cuáles son las fonts comunes de PhoneGap con los problemas de performance de jQuery Mobile?

Tengo una aplicación escrita con PhoneGap 1.0 y jQuery Mobile 1.0b2 ejecutándose en iPhone y iPad.

Desde que empecé a usar el marco, me he visto afectado por problemas de performance que cambian entre "páginas" en la aplicación. Después de presionar el button, hay una buena segunda pausa, a veces más larga, antes de que ocurra la transición. He probado todos los ajustes de webkit, e incluso he esperado actualizaciones en ambos frameworks (comencé con Phongap 0.95 y jQuery Mobile Alpha 4) y este problema no se ha resuelto.

Estoy usando tantos objects "integrados" como sea posible (en lugar de imágenes de botones personalizados) y uso mis propios backgrounds PNG en cada pantalla. La aplicación en sí misma solo consta de 3 páginas, más una página que sirve como pantalla de opciones.

En lugar de search una solución específica, me gustaría saber cuáles son algunos de los problemas comunes relacionados con el performance cuando se trabaja con PhoneGap y jQuery Mobile para iOS? De esa forma, otras personas pueden search una list de opciones cuando se trata de sus propios problemas.

Una de las mayores diferencias entre ejecutar su aplicación jQuery Mobile en Safari y ejecutarlo en UIWebView en iOS nativo es la falta del motor Nitro. Fue introducido en iOS 4.3. Hizo que JavaScript se procesara aproximadamente dos veces más rápido en Safari, pero no pudieron crearlo en aplicaciones nativas o aplicaciones web en caching de pantalla completa. A partir de iOS 5, el motor Nitro fue llevado al rest de la plataforma.
http://arstechnica.com/apple/news/2011/06/ios-5-brings-nitro-speed-to-home-screen-web-apps.ars

Más allá del motor Nitro, existen otros posibles problemas de performance relacionados con jQuery Mobile y las transiciones de página. Cuanto más lenta sea la plataforma, más notorios serán los trematodos. A veces puede manifestarse como un parpadeo blanco entre las representaciones de las páginas. Otras veces, puede manifestarse como: transición a una nueva pantalla: flashear a la pantalla anterior, flashear a una nueva pantalla. Estos cambios no son consistentes y puede ser un infierno intentar averiguar exactamente por qué está sucediendo. Los dispositivos nuevos y más rápidos tienen less problemas con esto, por lo que la buena noticia es que, con el time, este problema desaparecerá. Construya para el futuro, los dispositivos pronto se pondrán al día.

Dicho esto, también consideremos el performance en términos de la rapidez con que los usuarios pueden hacer clic en lo que desean. Las peculiaridades de la transición se minimizan al deshabilitar las transiciones de página. Esto proporciona el beneficio adicional de boost el performance efectivo de su página en 500 milisegundos. Las transiciones de página son bonitas, pero el hecho es que son lentas. El performance es una característica. Simplemente apague las transiciones incluyendo esto en sus scripts personalizados.

$(document).bind("mobileinit", function(){ $.mobile.defaultPageTransition="none"; }); 

Además, (y esto se dirige a la comunidad en general que podría leer esto) … considere seriamente si necesita realmente tener una aplicación nativa. A less que necesite PhoneGap para acceder a la camera, giroscopios o algún otro soporte de hardware que Safari no pueda ofrecer, siempre obtendrá un mejor performance simplemente usando la web. Comprendo el deseo de tener presencia para tener una "tienda de aplicaciones", pero solo se descubre un 1% de las aplicaciones y su vida media es de unas pocas semanas. Luego tienes la pesadilla de mantenimiento de la liberación de actualizaciones cada vez que hay una actualización del sistema operativo. Hay muchas ventajas que solo se lanzan a través de la web. Con una única actualización, puede actualizar a todos los usuarios de todas las plataforms. Por lo tanto, considere el performance de la plataforma, pero también considere el performance de sus lanzamientos.

jQuery Mobile aplica una demora de aproximadamente 300 ms antes de que se click la function de JavaScript para hacer clic en los botones en dispositivos táctiles. Esto resuelve un problema en los dispositivos táctiles en el que si el button que se hace clic cambia el contenido que se encuentra debajo (por ejemplo, un cambio de página), entonces el clic también se puede interpretar en ese contenido que reemplaza al button.

Cuando el usuario quita el dedo del button después de presionarlo, se llama inmediatamente a un evento touchend , seguido de cerca por un vclick y luego un evento tap . Luego tiene los mousedown mouseup que se mouseup events de click , mousedown y mouseup .

Entonces, si hace algo de lo siguiente obtendrá ese retraso de 300 ms:

 $('#myButton').bind('click', ... $('#myButton').click( ... <div id='myButton' onClick='changePage()' ... 

Por lo tanto, debería enlazar un evento vclick o tap al button como este (creo que vclick es un poco más rápido que tap ):

 $('#myButton').bind('vclick', function(ev) { ev.preventDefault(); //Your code }); 

También podría vincularse al evento touchend , pero esto puede dar algunos efectos no deseados, pero pruébelo.

La jQuery Mobile Documentation dice esto … (por lo que mi consejo es probar vclick o tap a background el dispositivo de testing):

Recomendamos usar el clic en lugar de vclick en cualquier momento que la acción que se está activando tenga la posibilidad de cambiar el contenido debajo del punto que se tocó en la pantalla. Esto incluye transiciones de página y otros comportamientos, como queuepso / expansión, que podrían hacer que el cambio de pantalla o el contenido se reemplacen por completo.

Una buena discusión sobre esto está aquí: http://forum.jquery.com/topic/how-to-remove-the-300ms-delay-when-clicking-on-a-link-in-jquery-mobile#14737000003088725

He tenido cierto éxito con la eliminación de text y la sombra de cuadro, que es un CSS bastante simple:

 .ui-shadow, .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a, .ui-body-b, .ui-btn-up-b, .ui-btn-hover-b, .ui-btn-down-b, .ui-bar-c, .ui-body-c, .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c, .ui-bar-c, .ui-body-d, .ui-btn-up-d, .ui-btn-hover-d, .ui-btn-down-d, .ui-bar-d, .ui-body-e, .ui-btn-up-e, .ui-btn-hover-e, .ui-btn-down-e, .ui-bar-e, .ui-overlay-shadow, .ui-shadow, .ui-btn-active, .ui-body-a, .ui-bar-a { text-shadow: none; box-shadow: none; -webkit-box-shadow: none; } 

Como dijo Shane G , el motor Nitro JavaScript no se usa para UIWebViews en versiones anteriores a iOS 5.0; sin embargo, en dispositivos con iOS 5.0 o superior, el motor de JavaScript se sentirá casi dos veces más rápido en aplicaciones nativas y aplicaciones de pantalla de inicio.

Siempre existe la opción de crear un manifiesto de caching HTML5 para que su website funcione sin connection pero aún se ejecute en Safari: http://www.html5rocks.com/es/tutorials/appcache/beginner/

Este fragment realmente ha ayudado al performance de mi aplicación nativa PhoneGap / Jquery Mobile para iOS. Tuve los mismos problemas también para un sitio mobile que estaba construyendo el año pasado y recuerdo usar 1/2 segundo se desvanece con jQuery para tonificarlo, pero esta solución es una bendición:

 * { -webkit-transform: translateZ(0); } 

Originario del blog de Drew Dahlman: http://www.drewdahlman.com/meusLabs/?p=135

Este código tiene total sentido si lo piensas. Coloca todos los elementos en el mismo plano.

Además, recientemente he visto en este blog un truco similar: http://jessefreeman.com/articles/room112-phonegap-exploration/

  * { -webkit-transform: translate3d(0,0,0); } 

No he probado esto todavía, pero pensé que lo agregaría si termina ayudando a alguien.

Otra forma de mejorar el performance de la aplicación PhoneGap es la siguiente:

Como dijo @Kimm:

 $('#myButton').bind('vclick', function(ev) { ev.preventDefault(); //Your code }); 

Aquí la respuesta será mucho mejor que .click, pero el sistema puede propagar el evento en algunos casos, lo que resulta en un comportamiento inesperado. Para resolver este problema, use:

 $('#myButton').bind('vclick', function(ev) { ev.preventDefault(); //Your code return false; }); 

El uso de esta cosa será correcta y sin efectos secundarios … 🙂

JQueryMobile es bastante lento en Phonegap, las transiciones son un problema importante.

El performance mejorado para su aplicación podría lograrse mediante:

  1. Desactivar las transiciones de página (si desea conservar JQM)
  2. Considere otro marco como iWebKit (no tan elegante como JQM, pero rápido en Phonegap)

Personalmente probé el número 1, pero no dio la experiencia de usuario deseada. Eso condujo a la opción n. ° 2 y a una experiencia de usuario más rápida.

Intente actualizar su software. PhoneGap 1.2 + jQueryMobile 1.0 (lanzado hoy) están mostrando grandes ganancias de performance para mí hasta ahora.

Para mejorar la velocidad de transición simplemente configure la duración de la transición como:

 .in, .out { -webkit-animation-duration: 250ms !important; } 

En el caso anterior, la duración de la transición es de 250 ms.