javascript - proyecto - Problema de rendimiento de aplicaciones móviles del marco IONIC

ionic framework 2018 (2)

Estamos desarrollando una aplicación móvil de alto perfil para uno de nuestros clientes utilizando el marco IONIC. Ya casi hemos terminado con el desarrollo de esta fase. La aplicación parece estar funcionando bien cuando se abre en el navegador web / móvil. Sin embargo, cuando portamos esto en una aplicación móvil usando los comandos del marco, la aplicación se vuelve muy lenta y se atasca mucho. Esto se traduce en una experiencia de usuario muy pobre.

Estoy usando el comando "Android Run iónico" para crear el APK. ¿Podría por favor ayudarnos con este problema? No podemos enviar el APK para realizar pruebas con este problema. ¿Hay alguna configuración que pueda usar para acelerar la aplicación?

Además, he agregado un cargador iónico en la mayoría de mis páginas. El comportamiento es muy inconsistente (a veces aparece solo). Esto también está contribuyendo a una mala experiencia del usuario.

¿Qué cargador iónico estás usando? No estaba contento con las soluciones disponibles y terminé lanzando mi propia solución.

¿A qué versión va dirigida y con qué versión está probando (dispositivo físico)?

Aquí hay algunos consejos de rendimiento:

Si la orientación <4.4 y el tamaño de la APK no es un problema, intente agrupar el tiempo de ejecución de cruce de peatones. Es bastante fácil con el clónico iónico, puede simplemente hacer ionic browser add crosswalk de ionic browser add crosswalk para incluirlo. El rendimiento será mejor, pero el tamaño de APK será más grande.
ionic run android creará un APK, pero es mucho mejor hacer ionic build android
Minimice JS y CSS, concat, y gulpfile.js depuración en su gulpfile.js . También he tenido un ligero aumento de rendimiento al usar html2js en las plantillas.
Cuidado con ng-repeat . En su lugar, utilice collection-repeat o, si debe usar ng-repeat , asegúrese de que está utilizando la track by función.
Los filtros pueden tener un impacto negativo en el rendimiento. Use directivas cuando sea posible.
Aplazar aplazar aplazar $q es tu amigo y puede ayudar a dar una ilusión de velocidad.
Simplemente use DOM simple o ''DOM'' cuando pueda, no todo tiene que ser angular.
Utilice un enlace de una sola vez cuando sea posible. {{ ::thing }} establece el valor una vez y lo persiste, lo que significa menos observadores, lo que significa un mejor rendimiento.
Evite $scope.$apply() ya que esto procesa todas las cosas. Utilice $scope.$digest() lugar y solo se procesará desde el ámbito desde el que se llama.
Mantenga a sus $$watchers a un mínimo absoluto!
Sólo haz lo que necesites. Asegúrese de incluir lo mínimo en bibliotecas, etc.
No uses jQuery (aunque esto es obvio)

¡Buena suerte!

Actualización 09/17/2015

La integración de Cordova con Crosswalk funciona a la perfección en estos días, y se recomienda su uso para probar y construir la aplicación para Android.

La respuesta de Darryn.ten es definitivamente muy detallada y contiene muchos consejos excelentes. Me gustaría añadir algunas cosas a lo mencionado anteriormente:

Paso de peatones Esa es la principal herramienta para mejorar el rendimiento (en Android 4.4 <donde no tiene el navegador Chromium integrado). Si la instalación del paso de peatones con el ionic cli causa errores y errores (como seguramente lo hará), descargue Intel XDK y podrá probar / depurar / construir su aplicación desde allí utilizando el paso de peatones con mucha facilidad.
Una cosa más que he visto que causa un problema de rendimiento importante son las imágenes de fondo y los gradientes , todavía no estoy seguro del rendimiento de opacidad en general, pero cuando eliminé estos dos, el desplazamiento y la transición fueron súper rápidos.
Use hardware basado en css ( translate3d ) para mover cosas alrededor del DOM.

Las aplicaciones híbridas aún no son como nos gustaría que fuesen, pero esperamos que tarde o temprano salga bien.