IONIC framework Mobile Application Performance Issue

Estamos desarrollando una aplicación mobile de alto perfil para uno de nuestros clientes utilizando el marco IONIC. Ya casi hemos terminado con el desarrollo para esta fase. La aplicación parece funcionar bien cuando se abre en Web / Mobile Browser. Sin embargo, cuando introducimos esto en una aplicación mobile utilizando los commands framework, la aplicación se vuelve muy lenta y se atasca mucho. Esto resulta en una experiencia de usuario muy pobre.

Estoy usando el command "Ionic run Android" para crear el APK. ¿Podrías por favor ayudarnos con este problema? No podemos enviar el APK para probar con este problema. ¿Hay alguna configuration que pueda usar para acelerar la aplicación?

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

¿Qué Cargador Iónico estás usando? No estaba satisfecho con las soluciones disponibles y terminé desarrollando mi propia solución.

¿A qué versión te orientas y con qué versión estás probando (dispositivo físico)?

Aquí hay algunos consejos de performance:

  1. Si segmentar el tamaño de <4.4 y APK no es un problema, intente agrupar el time de ejecución del paso de peatones. Es bastante fácil con el cli iónico, puede hacer que el ionic browser add crosswalk de ionic browser add crosswalk para includelo. El performance será mejor, pero el tamaño de APK será mayor.

  2. ionic run android hará un APK, pero es mucho mejor hacer ionic build android

  3. Minificar JS y CSS, concat y eliminar debugging en gulpfile.js . También he tenido ligeras ganancias de performance usando html2js en las templates.

  4. Cuidado con ng-repeat . Más bien usa la colección-repetición o, si debes usar ng-repeat , asegúrate de que estás usando la function de track by .

  5. Los filters pueden tener un impacto negativo en el performance. Use directivas donde sea posible.

  6. Defer diferir defer! $q es tu amigo y puede ayudar a dar una ilusión de velocidad.

  7. Solo usa el formatting OL 'DOM cuando puedas, no todo debe ser Angular.

  8. Use la unión única cuando sea posible. {{ ::thing }} establece el valor una vez y lo persiste, lo que significa less observadores, lo que significa un mejor performance.

  9. Evite $scope.$apply() ya que esto procesa todas las cosas. Use $scope.$digest() lugar y solo se procesará desde el ámbito desde el que se llama.

  10. ¡Mantenga a sus $$watchers al mínimo!

  11. Solo agrupa lo que necesitas. Asegúrese de include el mínimo necesario en términos de bibliotecas, etc.

  12. No use jQuery (aunque esto es obvio)

¡Buena suerte!

Actualización 17/09/2015

La integración de Cordova con Crosswalk funciona perfectamente en estos días, y se recomienda usarla para probar y crear la aplicación para Android.


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

  • Paso de peatones Esa es la herramienta principal para una mayor mejora del performance (en Android 4.4 <donde no está incorporado el browser Chromium). Si instala el paso de peatones con el cli iónico provoca errores y errores (como casi seguro lo hará), descargue Intel XDK y puede probar / depurar / build su aplicación desde allí usando Crosswalk con mucha facilidad.
  • Una cosa más que he presenciado que causa un gran problema de performance son las imágenes de background y los gradientes , todavía no estoy seguro sobre el performance de la opacidad en general, pero cuando he sacado estos dos, el desplazamiento y la transición fueron súper rápidos.
  • Utilice css basado en hardware ( translate3d ) para mover cosas alnetworkingedor del DOM.

Las aplicaciones híbridas todavía no son como nos gustaría que fueran, pero es de esperar que tarde o temprano salga bien.