1

問題：

いくつかのアイテムをグリッドに表示する必要がある 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-コア: 2.0.1
  • nativescript-ui-sidedrawer: 6.0.0
  • CLI: 5.3.1
  • クロスプラットフォーム モジュール: 5.3.1
  • ランタイム: 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 個未満を表示することはできません)

何か案は？angular および nativescript の依存関係をダウングレードする必要はありません。

4

1 に答える 1