IONIC Framework Проблема с производительностью мобильных приложений

Мы разрабатываем мобильное приложение высокого профиля для одного из наших клиентов, использующего структуру IONIC. Мы почти закончили разработку этой фазы. Приложение работает хорошо, когда открытие в браузере Web/Mobile. Однако, когда мы переносим это в мобильное приложение, используя команды framework приложение становится очень медленным и сильно застревает. Это приводит к очень плохому пользовательскому опыту.

Я использую команду "ionic run android" для создания APK. Не могли бы вы помочь нам в этом вопросе? Мы не можем представить APK для тестирования с этой проблемой. Есть ли какая-либо конфигурация, которую я мог бы использовать для ускорения работы приложения.

Кроме того, на большинстве моих страниц добавлен Ionic Loader. Поведение очень непоследовательно (иногда оно появляется). Это также способствует плохому пользовательскому опыту.

Ответы

Ответ 1

Какой ионный загрузчик вы используете? Я был недоволен доступными решениями и закончил свое собственное решение.

Какую версию вы используете для таргетинга и какую версию вы тестируете (физическое устройство)?

Вот несколько советов по производительности:

  • Если таргетинг < 4.4, а размер APK не является проблемой, тогда попробуйте связать время выполнения перекрестка. Это довольно легко с ионным кли, вы можете просто сделать ionic browser add crosswalk, чтобы включить его. Производительность будет лучше, но размер APK будет больше.

  • ionic run android сделает APK, но гораздо лучше сделать ionic build android

  • Минимизировать JS и CSS, выполнить concat и strip debug в gulpfile.js. Я также получил небольшую прибыль от использования html2js на шаблонах.

  • Следите за ng-repeat. Скорее используйте collection-repeat или, если вы должны использовать ng-repeat, убедитесь, что используете функцию track by.

  • Фильтры могут негативно влиять на производительность. При необходимости используйте директивы.

  • Отложить отсрочку! $q является вашим другом и может помочь создать иллюзию скорости.

  • Просто используйте простой ol 'DOM, когда вы можете, а не все должно быть Angular.

  • Используйте одноразовую привязку, где это возможно. {{ ::thing }} устанавливает значение один раз и сохраняет его, что означает меньшее количество наблюдателей, что означает лучшую производительность.

  • Избегайте $scope.$apply(), поскольку это обрабатывает все вещи. Используйте $scope.$digest() вместо этого, и он будет обрабатываться только из области, из которой она вызвана.

  • Держите $$watchers до абсолютного минимума!

  • Объедините только то, что вам нужно. Убедитесь, что вы включили минимальный размер библиотек и т.д.

  • Не используйте jQuery (хотя это очевидно)

Удачи!

Ответ 2

Обновление 09/17/2015

Интеграция Cordova с Crosswalk отлично работает в наши дни, и ее рекомендуется использовать для тестирования и сборки приложения для Android.

Ответ Darryn.ten определенно очень подробный и содержит много замечательных советов. Я хотел бы добавить несколько вещей к тому, что было упомянуто выше:

  • Пешеходный. Это основной инструмент для улучшения производительности (в Android 4.4, где он не имеет встроенного браузера Chromium). Если установка пешеходного перехода с использованием ионного cli вызывает ошибки и ошибки (как это почти наверняка будет), скачайте Intel XDK, и вы сможете легко протестировать/отладить/создать приложение с помощью Crosswalk.
  • Еще одна вещь, с которой я столкнулся, вызывает некоторые серьезные проблемы с производительностью: фоновые изображения и градиенты, я все еще не уверен в производительности непрозрачности в целом, но когда я вынул эти два прокрутки и перехода пошел очень быстро.
  • Используйте аппаратное css (translate3d), чтобы перемещать файл вокруг DOM.

Гибридные приложения по-прежнему не так, как мы хотели бы, чтобы они были, но, надеюсь, рано или поздно он пойдет правильно.