Es difícil hacer suposiciones con respecto a la lenta el rendimiento y la cuestión de redirección. A continuación puede encontrar algunos aspectos que en mi opinión afectar al rendimiento de una aplicación móvil que consiste en HTML5, CSS3, JavaScript y debe ser tomado en cuenta en el análisis, el diseño y la fase de desarrollo.
método de implementación basado en el tamaño se recomienda
En el desarrollo de pequeñas aplicaciones móviles el uso de una sola página HTML usando vinculación página interna en AJAX. Para aplicaciones móviles más grandes, se recomienda un método para usar diferentes páginas HTML con enlaces internos de AJAX. Intenta crear plantillas de página reutilizables.
transiciones de página
Como se indica en la jQM 1.1.1 Docs, por defecto, todas las transiciones de fundido, excepto requieren transformación 3D apoyo. Los dispositivos que carecen de soporte 3D volverán a una transición de fundido, independientemente de la transición especificada. jQM hace esto para excluir proactivamente las plataformas con bajo rendimiento como Android 2.x de las transiciones avanzadas y garantizar que aún tengan una experiencia fluida. Tenga en cuenta que existen plataformas como Android 3.0 que técnicamente admiten transformaciones 3D, pero que aún tienen un rendimiento de animación deficiente, por lo que esto no garantizará que cada navegador tenga 100% de parpadeo. Decida el tipo de transición que usará después de considerar lo anterior.
Minify JS y CSS
Cada página debe ser lo más ligero posible. El objetivo de la minificación es preservar las cualidades operativas del código al tiempo que reduce su huella de bytes global. Hay muchas herramientas disponibles en la WEB como YUI Compressor, Minify y muchas más. Además, hay herramientas como la JLint que se utiliza para verificar si el código fuente de JavaScript cumple con las reglas de codificación. JLint es una herramienta de calidad de código que busca problemas en el código JavaScript. Los problemas informados no son necesariamente errores de sintaxis, pero pueden ser problemas estructurales. Tenga en cuenta que JLint no prueba que su código sea correcto. Considéralo una herramienta de ayuda. También hay herramientas para realizar la optimización de CSS. La optimización le ayuda a obtener tamaños de archivo CSS más pequeños y un mejor código escrito. Puede encontrar muchos optimizadores de CSS disponibles en la WEB, como CleanCSS y CSSTidy.
Componentes limita
se recomiendan las páginas HTML que limitarse a 25kb con el fin de obtener la ventaja de almacenamiento en caché óptimo para la mayoría de los navegadores web para móviles. El límite de almacenamiento en caché varía según la versión del sistema operativo. Por ejemplo, Android 2.1 tiene un límite de caché de aproximadamente 2Mb.
& HTML5 CSS3
intenta crear fácil de leer, para extender y código reutilizable. Es importante aprovechar al máximo el uso de HTML5 y CSS3. La declaración de HTML5 DocType (<!DOCTYPE html>
) debe ser lo primero en su documento HTML5 antes de la etiqueta html. Es una instrucción para el navegador web acerca de qué versión de HTML de la página está escrita en.
Utilice la W3C mobileOK Checker
El W3C mobileOK Checker es un servicio gratuito por el W3C que ayuda a comprobar el nivel de amabilidad móvil de la Web documentos, y en particular afirman si un documento web es mobileOK. Una página web es mobileOK cuando pasa todas las pruebas. Las pruebas se definen en el mobileOK Basic Tests 1.0 specification. Para comprender por qué es realmente importante consultar un documento web para la movilidad de los dispositivos móviles, probablemente valga la pena destacar algunos puntos sobre el llamado mundo móvil. En comparación con una computadora de escritorio común, un dispositivo móvil puede considerarse limitado a primera vista: tamaño de pantalla más pequeño, capacidades de procesamiento más pequeñas, menor cantidad de memoria, ningún mouse, etc. En comparación con las conexiones de datos fijos, las redes móviles pueden ser lentas y, a menudo, tienen una latencia más alta. En comparación con un usuario que se sienta frente a su computadora, el usuario mientras viaja tiene un tiempo limitado y se distrae fácilmente. Además de estas limitaciones, el mundo de los dispositivos móviles está muy fragmentado: muchos dispositivos diferentes, cada uno de los cuales define un conjunto único de funciones admitidas.
en cuenta la aparición en pantalla de diferentes tamaños
La densidad de pantallas de visualización y el tamaño y la escala de la página web debe tenerse en cuenta a la hora dirigidos a diferentes tamaños de pantalla. Los metadatos de la ventana gráfica se pueden usar para definir el tamaño de la ventana gráfica donde la ventana gráfica es el área del contenedor en el que se dibuja la página. La escala de vista define el nivel de zoom que se aplica a la página web. La propiedad de viewport target-densitydpi y las técnicas de CSS, JS se pueden usar para cambiar la densidad de la pantalla de destino para la página web. Hay muchos artículos en la WEB con respecto a la apariencia en diferentes tamaños de pantalla.
Identificar los flujos con retraso potencial
El PageSpeed Firefox/Chrome extension se puede utilizar para comprobar las páginas velocidad. Cuando se perfila una página web con Page Speed, se evalúa la conformidad de la página con una serie de reglas diferentes. Estas reglas son mejores prácticas de front-end generales que puede aplicar en cualquier etapa del desarrollo web. La extensión brinda consejos y sugerencias específicas sobre cómo implementar mejor las reglas e incorporarlas al proceso de desarrollo.
Espero que esto ayude.
¿Qué versión de jQuery Mobile? ¿Qué versión de PhoneGap? ¿Qué has hecho hasta ahora para intentar una solución? ¿Puedes mostrar algún código, por ejemplo, el orden de JS incluye? – Jasper