ios - scriptcase - ¿Cuáles son las fuentes comunes de PhoneGap con problemas de rendimiento de jQuery Mobile?

jquery mobile temas

Question

Tengo una aplicación escrita con PhoneGap 1.0 y jQuery Mobile 1.0b2 que se ejecuta en iPhone y iPad.

Desde que empecé a usar el marco, me han afectado los problemas de rendimiento al cambiar de "páginas" en la aplicación. Después de presionar el botón, hay una buena segunda pausa, a veces más, antes de que ocurra la transición. He intentado todos los ajustes del webkit, e incluso he esperado actualizaciones en ambos marcos (comencé con Phongap 0.95 y jQuery Mobile Alpha 4) y este problema no se ha resuelto.

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

En lugar de buscar una solución específica, me gustaría saber cuáles son algunos de los problemas comunes que rodean el rendimiento cuando se trabaja con PhoneGap y jQuery Mobile para iOS. De esa manera, otras personas pueden buscar una lista de opciones cuando se enfrentan a sus propios problemas.

Answer 1

Este fragmento realmente ha ayudado al rendimiento de mi aplicación nativa PhoneGap / Jquery Mobile para iOS. También tuve los mismos problemas para un sitio móvil que estaba construyendo el año pasado y recuerdo que usé fadeos de 1/2 segundo con jQuery para atenuarlo, pero esta solución es una bendición:

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

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

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

Además, recientemente he visto en este blog acerca de un hack 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.

Answer 2

He tenido cierto éxito con la eliminación de la sombra de texto y 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 de JavaScript Nitro 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á el doble de rápido en aplicaciones nativas y aplicaciones de pantalla de inicio web.

Siempre existe la opción de crear un manifiesto de caché HTML5 para que su sitio web pueda funcionar fuera de línea pero que aún se ejecute en Safari: http://www.html5rocks.com/en/tutorials/appcache/beginner/

Answer 3

Intenta actualizar tu software. PhoneGap 1.2 + jQueryMobile 1.0 (publicado hoy) está mostrando grandes mejoras de rendimiento para mí hasta ahora.

Answer 4

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

El rendimiento mejorado de su aplicación podría lograrse mediante:

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

Intenté personalmente el # 1, pero no proporcionó la experiencia de usuario deseada. Eso llevó a la opción # 2 y una experiencia de usuario más rápida.

Answer 5

Otra forma de mejorar el rendimiento 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;
});

Usando esto, todo será correcto y no tendrá efectos secundarios ... :)

Answer 6

Para mejorar la velocidad de transición, simplemente ajuste 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.

Answer 7

Una de las mayores diferencias entre ejecutar la aplicación jQuery Mobile en Safari y ejecutarla en UIWebView en iOS nativo es la falta del motor Nitro. Fue introducido en iOS 4.3. Hizo que el procesamiento de JavaScript fuera dos veces más rápido en Safari, pero no pudieron integrarlo en aplicaciones nativas o en aplicaciones web en caché de pantalla completa. A partir de iOS 5, el motor Nitro fue llevado al resto 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 rendimiento relacionados con jQuery Mobile y las transiciones de página. Cuanto más lenta sea la plataforma, más notables son los revueltas. A veces puede manifestarse como un parpadeo blanco entre las representaciones de la página. Otras veces, puede manifestarse como: transición a una nueva pantalla - flash a la pantalla anterior - flash a la nueva pantalla. Estos ruidos no son consistentes y puede ser un infierno tratar de averiguar exactamente por qué está sucediendo. Los dispositivos más nuevos y rápidos tienen menos problemas con esto, por lo que la buena noticia es que, con el tiempo, este problema desaparecerá. Construir para el futuro, los dispositivos pronto se pondrán al día.

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

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

Además, (y esto va a la comunidad en general que puede leer esto) ... considere seriamente si necesita tener una aplicación nativa. A menos que necesite PhoneGap para acceder a la cámara, los giroscopios o algún otro soporte de hardware que Safari no pueda ofrecer, siempre obtendrá un mejor rendimiento con solo usar la web. Entiendo el deseo de tener una presencia para tener una "tienda de aplicaciones", pero solo el 1% de las aplicaciones se descubren y su vida media es solo de unas pocas semanas. Luego tienes la pesadilla de mantenimiento de lanzar actualizaciones cada vez que hay una actualización para el sistema operativo. Hay muchas ventajas por el solo lanzamiento a través de la web. Con una sola actualización, puede tener a todos en todas las plataformas actualizadas. Por lo tanto, considere el rendimiento de la plataforma, pero también considere el rendimiento de sus lanzamientos.

Answer 8

jQuery Mobile impone un retraso de aproximadamente 300 ms antes de que se llame a la función JavaScript para los botones ''pulsados'' en dispositivos táctiles. Esto resuelve un problema en los dispositivos táctiles donde, si al hacer clic en el botón cambia el contenido debajo de él (por ejemplo, un cambio de página), el clic también puede interpretarse en ese contenido que reemplaza al botón.

Cuando el usuario retira el dedo del botón después de presionarlo, se llama inmediatamente a un evento de tap , seguido de cerca por un vclick y luego un evento de tap . Luego tienes los mousedown mouseup antes de que se click eventos de click , mousedown y mouseup .

Entonces, si realiza alguna de las siguientes acciones, obtendrá un retraso de 300 ms:

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

Así que, en lugar de eso, debes vincular un evento vclick o tap al botón así (creo que vclick es un poco más rápido que el tap ):

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

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

La documentación de jQuery Mobile dice esto ... (por lo que mi consejo es probar a fondo vclick o tap en su dispositivo de prueba):

Recomendamos que haga clic en lugar de hacer clic en cualquier momento en el 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 las transiciones de página y otros comportamientos, como colapsar / expandir, lo que podría resultar en el cambio de la pantalla o en el reemplazo del contenido.

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