2012-06-18 16 views
5

Estoy desarrollando una aplicación web usando jQuery Mobile en el lado del cliente y PHP & MySQL en el lado del servidor. La aplicación funciona muy bien en navegadores de escritorio como Safari, Chrome y Firefox. Sin embargo, en el iPad, donde la aplicación se abre como un clip web desde la pantalla de inicio, la aplicación funciona mucho peor. El desplazamiento funciona bien, pero tocar un enlace para cargar una página del servidor va muy lento.jQuery Mobile muy lento en el iPad

Una grabación de la pantalla del iPad muestra que (por ejemplo) después de tocarla toma 0,3 segundos antes de que el elemento golpeado se resalte y se muestre el cargador. Después de 1,0 segundo desde el comienzo, se representa/muestra la mitad inferior de la página abierta (debajo del cargador). Luego, demora otros 0,6 segundos antes de mostrar la parte superior de la página, lo que hace que el tiempo total requerido para cargar la página 1,6 segundos. Se puede encontrar un video que muestra este proceso (jugado al 25% de la velocidad original) here.

Loading process

entiendo que la carga de una página (a través de WiFi) lleva algún tiempo, pero yo no entiendo por qué hacer que la mitad superior de la página tarda un extra de 0,6 segundos. Asumiendo que la página está completamente cargada después de 1,0 segundos (porque la mitad inferior de la página ya se muestra), creo que eso también lleva bastante tiempo, porque solo lleva unos 0,5 segundos en Safari en mi Mac . Pero eso podría ser causado por el procesador más lento en el iPad y el retraso de la conexión WiFi.

Afortunadamente, alguien conoce algunas optimizaciones (del lado del cliente) para hacer que la aplicación se comporte (o sienta) más rápido. Ya deshabilité las animaciones dentro de jQuery Mobile y trataré de optimizar el lado del servidor.


Tal vez estas cosas son importantes a saber:

  • Todas las páginas que vuelvo de servidor tienen una completa <head> con múltiples hojas de estilo y scripts que se hace referencia. ¿JQuery Mobile ignora el <head> o alimenta esta potencia de procesamiento?
  • Tengo un encabezado y pie de página fijo en la mayoría de las páginas. Estoy usando <div data-role="…" data-position="fixed" data-id="…" data-tap-toggle="false"> para lograr esto. El encabezado y el pie de página también están incluidos en todas las páginas.
  • mayoría de los encabezados tienen un botón en el lado izquierdo (<a data-role="button"> etiqueta), un título en el medio (<h1> tag) y un grupo control en el lado derecho (<div data-role="controlgroup">) que contiene dos botones (<a data-role="button">).
  • Un botón en el encabezado está configurado para captar previamente la página a la que enlaza (<a href="…" data-role="button" data-rel="dialog" data-prefetch>). Este botón está incluido en cada página, pero el href del enlace es el mismo en cada página. Esto podría ser algo ...?
  • Todos los pies de página tienen una barra de navegación (<div data-role="navbar">) con varios elementos (<li><a>).
  • Algunas páginas son listas con capacidades de filtro (<ul data-role="listview" data-filter="true">). Actualmente, contiene solo algunos elementos (<li><a>, máximo 5) y separadores de listas (<li data-role="list-divider">).
  • Otras páginas son formularios (<form>) que contienen listviews también (<ul data-role="listview" data-inset="true">) con varios campos de formulario dentro (<li data-role="fieldcontain">).

Bueno, eso es todo lo 'especial' que se me ocurre. Si necesita saber más o ver algún código fuente, hágamelo saber.

+0

Utilicé jQuery Mobile para desarrollar un marco interno de desarrollo de aplicaciones web. Me complace decir que el rendimiento fue bastante alto en el marco y en las aplicaciones web resultantes. Esto me lleva a pensar, podría haber algo en sus páginas que puede estar consumiendo una gran cantidad de procesamiento? ¿Podrías ver, localizar y publicar esas partes para que SO pueda verlas mejor? – kishu27

+0

@ kishu27 He agregado algunos detalles técnicos que describen mi aplicación. – Jonathan

+0

Si estuviera en su situación, comenzaría a eliminar partes del procesamiento de la página (comentándolo) y vería qué afecta el rendimiento. Las cosas que mencionaste son lo que también hice, excepto el # 1. Y no afectan el rendimiento. – kishu27

Respuesta

2

El problema se solucionó (en su mayoría) mediante la actualización a jQuery Mobile 1.1. Esa versión incluye algunas correcciones/optimizaciones relacionadas con el rendimiento.

2

largo listviews son extremadamente lentos ... si está completando una lista en pagebefore/show; intente agregar un número más pequeño de li s inicialmente y agregue el resto después de un tiempo de espera pequeño.

+0

Mi lista de vistas contiene actualmente solo algunos elementos, máx. Creo que cinco, así que esa no debería ser la causa del problema. Aunque podría ser algo a tener en cuenta para el futuro, ¡gracias por mencionarlo! – Jonathan