NativeScript Angular RadListView рендеринг крайне медленно - PullRequest
Новая
       86

NativeScript Angular RadListView рендеринг крайне медленно

0 голосов
/ 12 апреля 2019

Проблема:

У меня есть приложение angular-nativescript, которое должно отображать некоторые элементы в сетке. Я использую RadListView для рендеринга списка, и после обновления моих угловых, {N} и других библиотечных зависимостей за последние несколько месяцев я заметил, что рендеринг элементов в RadListView стал невыносимо медленным. У меня есть несколько «вкладок», так что вы можете видеть различные типы элементов, и всякий раз, когда вы переключаете «вкладки», необходимо полностью перерисовать список с новым временем. Перед выполнением некоторых обновлений (которые, как я надеялся, улучшило бы производительность приложения) переключение вкладок не имело бы существенного отставания даже для рендеринга более 100 элементов. Теперь требуется несколько секунд, чтобы загрузить даже 24 (я переключился на динамический рендеринг при прокрутке, чтобы ускорить процесс, но он недостаточно хорош).

Информация о платформе:

  • ios (tns ios 5.2.0, 5.3.1) [Angular 7]
  • nativescript-ui-listview: 6.1.0
  • nativescript-ui-core: 2.0.1
  • nativescript-ui-sidedrawer: 6.0.0
  • CLI: 5.3.1
  • Кроссплатформенные модули: 5.3.1
  • Runtime (s): tns-ios 5.3.1

Проблема, по-видимому, связана с наличием некоторых вложенных структур в RadListView. Мой исходный код (который работал, не изменился, так как он отлично работал на старых версиях {N}, Angular, nativescript-ui: 

<RadListView id="itemList" top="0" left="0" [items]="displayedInventory" separatorColor="white" [loadOnDemandMode]="loadOnDemandMode"
    (loadMoreDataRequested)="onLoadMoreItemsRequested($event)" class="gridview-wrap-tabs" dock="top" [ngClass]="{'gridview-wrap-tabs': (posLocation && posLocation.tabs)}">
    <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="4" itemHeight="180" horizontalAlignment="left"
        class="inventory-list-view-inner" separatorColor="black">
    </ListViewStaggeredLayout>
    <ng-template tkListItemTemplate let-item="item">
        <StackLayout class="inventory-stack-wrap">
            <GridLayout rows="auto, *, auto" columns="auto, auto" orientation="horizontal" class="outerBox" stretchLastChild="true" (tap)="addToCart(item, true)"
                [ngClass]="{ 'portraitBox': orientation==='portrait' , 'selected-inventory-item': item.isSelected, 'empty-inventory-item': item.price < 0}">
                <Label row="0" col="0" *ngIf="item.type==='category'" height="40px" class="price-label-category" [ngClass]="{ 'portrait-category-label': orientation==='portrait' }"
                    text="Category"></Label>
                <Label row="1" col="0" verticalAlignment="top" [text]="item.name" *ngIf="item.type==='category'" class="name-label" textWrap="true"
                    [ngClass]="{ 'portrait-name-label': orientation==='portrait' }"></Label>

                <Label row="0" col="0" verticalAlignment="top" [text]="item.name" *ngIf="item.name && item.name.length <=2 0 && item.type !=='category'"
                    class="name-label" textWrap="true" [ngClass]="{ 'portrait-name-label': orientation==='portrait' }"></Label>
                <Label row="0" col="0" verticalAlignment="top" [text]="item.name.slice(0,20) + '...'" *ngIf="item.name
                    && item.name.length> 20 && item.type !== 'category'" class="name-label" textWrap="true" [ngClass]="{'portrait-name-label': orientation
                    === 'portrait'}"></Label>

                <GridLayout col="0" colSpan="2" row="1" rowSpan="2" width="100%" *ngIf="item.imageSource">
                    <Image class="inventory-image" [ngClass]="{'portrait-inventory-image': orientation==='portrait'}" [src]="item.imageSource"></Image>
                </GridLayout>
                <GridLayout width="100%" *ngIf="item.type !=='category'" row="2" col="0" colSpan="2" columns="auto, *, 10" rows="auto">
                    <Label col="1" row="0" horizontalAlignment="right" height="40px" class="price-label" [ngClass]="{ 'portrait-price-label': orientation==='portrait' }"
                        text="${{item.price | number: '1.2-2'}}"></Label>
                </GridLayout>
            </GridLayout>
        </StackLayout>
    </ng-template>
</RadListView>

В качестве подтверждения концепции для проверки того, что рендеринг RadListView замедляет его, я попробовал сделать это с помощью всего одной метки с именем элемента, встроенным в, и рендеринг был практически мгновенным - так что, похоже, проблема с тем, как RadListView отображает подэлементы, такие как StackLayout, GridLayout. Я также попытался заменить GridLayout на DockLayout и удалить все угловые * ngIfs и * ngClasses (и убрал тег Image), чтобы посмотреть, не улучшит ли это производительность, но, похоже, это никак не повлияет. Все еще очень медленно загружать только 24 элемента. (Загрузка действительно увеличивается для меньшего количества элементов - но я не могу отобразить меньше 24)

Есть идеи? Я бы предпочел не понижать мои угловые и нативные зависимости

1 Ответ

1 голос
/ 15 апреля 2019

Мне удалось значительно улучшить время загрузки, переключившись с использования ListViewStaggeredLayout для ListViewGridLayout. Проблема не была в более ранних версиях {N} и angular, так что похоже, что обновление где-то по пути вызвало его задержку.

...