Ionic 3: как справиться с огромным html-файлом из-за плохой производительности?

У меня проблема с производительностью, когда я открываю ionic 3 Modal. Мне нужно показать список в модальном режиме, а длина списка составляет 1000.

Чтобы открыть модальное окно во время рендеринга, требуется несколько секунд.

Я думал об использовании InfiniteScroll в модальном окне, но я использую Searchbar, что означает, что серверная сторона должна разработать для этого больше API.

Поскольку данные списка довольно статичны, я хотел бы сделать так:

  1. Предварительно загрузите модальную страницу и скройте ее по умолчанию.
  2. Показать модальное окно, когда оно должно быть открыто.
  3. Когда модальное окно закрыто, НЕ уничтожайте его, просто спрячьте.

Но, согласно ionic docs, я не могу повторно использовать модальные окна.

Итак, мой вопрос: есть ли лучший способ сделать доступный для поиска список 1000 в ionic3?

Спасибо.

РЕДАКТИРОВАТЬ: я попытался с помощью localStorage сохранить json (около 100 КБ) и прекратить использование XHR, чтобы сократить время загрузки. Однако я не чувствую, что время загрузки стало быстрее. Я тестировал всего 100 списков вместо 1000, и модальное окно открывалось намного быстрее.


ionic3 performance
person Téwa    schedule 21.06.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Есть несколько вариантов:

  1. Если он на самом деле статичен, просто поместите его в веб-хранилище и извлеките его, когда пользователь перезагрузит страницу.

  2. Если он «довольно» статичен, что бы это ни значило, просто поместите его где-нибудь в DOM, чтобы он загружался только один раз за загрузку страницы. Когда пользователь щелкает ссылку, чтобы открыть модальное окно, сохраняйте данные в скрытом поле. Может быть даже хорошей идеей загружать его асинхронно по мере загрузки страницы, что потенциально может полностью исключить время загрузки с точки зрения пользователя.

  3. Используйте свой собственный модальный режим и просто скройте/покажите его. Загрузите его асинхронно.

Пример кеша

Пример jQuery AJAX

person Christopher Schneider    schedule 21.06.2017
comment
Спасибо за ответ. На самом деле я не упомянул о том, что я пробовал с локальным хранилищем. Чтобы сэкономить xhr, получите time. Я сохранил данные json (около 100 КБ) в локальном хранилище. Но я не вижу, чтобы производительность с благодарностью увеличилась. Я тестировал только 100 списков вместо 1000. Это действительно стало быстрее. Поэтому я подумал, что это проблема рендеринга. - person Téwa; 21.06.2017
comment
Так что ваши варианты 1, 2 не работают. 3 может быть хорошей идеей. Просто мне интересно, есть ли встроенный компонент ionic 3, который делает его быстрее и проще. - person Téwa; 21.06.2017
comment
Это просто сгенерированный HTML. Посмотрите на исходный код, сгенерированный при открытии модального окна, скопируйте/вставьте и вуаля. Он должен работать. - person Christopher Schneider; 21.06.2017
comment
Хорошо, я на самом деле не думал о том, чтобы взять сгенерированный HTML. Я протестировал с помощью метода XMLSerializer serializeToString и успешно скопировал и вставил список в модальное окно. Однако HTML, который я скопировал, включает ионные теги, такие как ‹ion-item› или ‹ion-checkbox›, а использование ‹div [innerHTML]=myCopiedHtml› игнорирует ионные теги. Я думаю, что мне нужно выбрать либо № 3 из пользовательского варианта, либо использовать InfiniteScroll. - person Téwa; 21.06.2017

arrow_upward
0
arrow_downward

Хорошо, я сделал это, используя <ion-infinite-scroll (ionInfinite)="doInfinite($event)">.

  1. Прежде всего, когда модальное открыто, получите данные списка с сервера и сохраните в local storage
  2. В начале просто покажите 20 элементов из 1000. Так рендеринг будет намного быстрее.
  3. Когда пользователь прокручивает вниз, будет выполнено doInfinite.
  4. В функции doInfinite проверьте, какой будет следующий индекс, чтобы отобразить данные. Как логика пагинации. И получить правильные данные и push в массив списка.
  5. Что касается <ion-searchbar>, когда вы получаете данные списка с сервера или из локального хранилища, сохраняйте исходные данные списка для поиска (в моем случае я просто использовал this.originalData = myData). Таким образом, всякий раз, когда пользователь выполняет поиск, набрав, вы можете фильтровать из массива 1000, но без проблем с медленным рендерингом.
person Téwa    schedule 21.06.2017