NativeScript Angular RadListView 渲染极其缓慢

Posted 2023-04-13

【中文标题】NativeScript Angular RadListView 渲染极其缓慢

【英文标题】：NativeScript Angular RadListView rendering extremely slowly

【发布时间】：2019-09-03 09:48:07

【问题描述】：

问题：

我有一个 angular-nativescript 应用程序，它需要在网格中显示一些项目。我正在使用 RadListView 来呈现列表，在过去几个月升级了我的 angular、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 运行时：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'"  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"  *ngIf="item.imageSource">
                    <Image class="inventory-image" [ngClass]="'portrait-inventory-image': orientation==='portrait'" [src]="item.imageSource"></Image>
                </GridLayout>
                <GridLayout  *ngIf="item.type !=='category'" row="2" col="0" colSpan="2" columns="auto, *, 10" rows="auto">
                    <Label col="1" row="0" horizontalAlignment="right"  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 等子项的问题。我还尝试用 DockLayout 替换 GridLayout 并删除所有有角度的 *ngIfs 和 *ngClasses（并删除了 Image 标签），看看这是否会提高性能，但它似乎没有任何效果。仅加载 24 个项目仍然非常缓慢。 （对于较少的项目，加载确实会显着增加 - 但我最初不能显示少于 24 个）

有什么想法吗？我宁愿不必降级我的 angular 和 nativescript 依赖项

【问题讨论】：

你能分享一个 Playground 示例吗，应用所有样式和类可能很容易调试，有助于查看是否是布局问题。

【参考方案1】：

我能够通过从使用 ListViewStaggeredLayout 到 ListViewGridLayout。该问题在 N 和 angular 的早期版本中不存在，因此它看起来像是沿途某处的更新导致它滞后。

【讨论】：

来自 N 团队的更多详细信息：github.com/telerik/nativescript-ui-feedback/issues/1081。 TLDR：如果你想要性能，不要使用 ListViewStaggeredLayout