Низкая производительность на Ionic4 / Angular7 (модальный, ионная кнопка)

#performance #ionic4 #capacitor

#Производительность #ionic4 #конденсатор

Вопрос:

Я использую Ionic 4 / Angular7 с angular / material для создания своего приложения. Однако я сталкиваюсь с проблемой низкой производительности на моем реальном устройстве (Samgsung C5).

Моя настройка страницы — домашняя.страница содержит компонент заголовка и использует кнопку (modalCtrl) для вызова Filter.page из компонента заголовка.

  1. Ионная кнопка

Я использую этот компонент для создания кнопки фильтра с таким значком

 <ion-buttons slot="end" (tap)="show()">
    <ion-button fill="clear">
        <i class="fa fa-cog " aria-hidden="true"></i>
    </ion-button>
</ion-buttons>
  

При нажатии кнопки будет показан эффект пульсации, и эффект пульсации будет медленным и запаздывающим. Я пытался использовать (click) , но это то же самое.

2. ионно-модальный

У меня есть страница фильтра, и я пытаюсь использовать modalCtrl для ее вызова, как показано ниже

 let modal = await this.modalCtrl.create({
  component: FilterPage,
  cssClass: "filter animated zoomIn fastest",
  backdropDismiss: true,
  showBackdrop: true,
  animated: false
})
await modal.present();
  

Модальный фильтр является не полноэкранным, а коробочным и использует эффект Animation.css ZoomIn, он очень плавный в локальном браузере, но когда я пробую его на реальном устройстве, эффект ZoomIn очень медленный при первом вызове, это так же, как использовать 2-3 кадра для завершенияцелая анимация. Тем не менее, это намного более плавно после первого вызова, но все же это не то же самое, что браузер.

Я использовал флаг —prod и конденсатор для сборки apk. Есть предложения по его улучшению? например, предварительная загрузка страницы FilterModal?

Вот мой ionic info

 ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.4.1

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.19
   @capacitor/core           : 1.0.0-beta.19

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (5 plugins total)

System:

   Android SDK Tools : 26.1.1 (/Users/gary/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v8.11.4 (/usr/local/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61
  

Обновить

Я пытался собрать и запустить на iPhone, проблем нет, анимация быстрая и плавная. Тем не менее, я попытался использовать другой телефон Android для тестирования тех же вещей, он по-прежнему получал медленную анимацию при первом вызове и после этого становился более плавным.

Оба телефона Android работают на Android 8 и используют Chrome WebView.

Комментарии:

1. Когда вы говорите «в локальном браузере», вы имеете в виду на своем рабочем столе / ноутбуке разработчика? Каков результат при попытке в браузере устройства? (Доступ к локальному хосту вашего компьютера разработчика из браузера вашего устройства) Каков результат, когда вы пробуете онлайн-демонстрации Ionic и ваших animations.css из браузера вашего устройства?

2. @ghybs Привет, «локальный браузер» означает запуск «ionic serve» на моем ноутбуке разработчика, и результат получается очень плавным и быстрым. И я попытался использовать браузер моего телефона (chrome) для доступа к моему ноутбуку разработчика, результат такой же, как у —prod APK, который очень медленный при первом вызове и стал немного более плавным после первого вызова. Так что это моя проблема с телефоном или что? Спасибо.

3. На странице Ionics GitHub есть открытая проблема — анимация пульсаций медленная / нервная при первом нажатии. Это может быть похоже github.com/ionic-team/ionic/issues/17699 .