NativeScript Angular RadListView 渲染速度极慢
NativeScript Angular RadListView rendering extremely slowly
问题:
我有一个 angular-nativescript 应用程序需要在网格中显示一些项目。我正在使用 RadListView 来呈现列表,并且在过去几个月升级我的 angular、{N} 和其他库依赖项之后,我注意到项目的 RadListView 呈现速度变得非常慢。我有多个 "tabs" 所以你可以看到不同类型的项目,每当你切换 "tabs" 它需要用新的时间完全重新渲染列表。在进行一些升级(我曾希望这会提高应用程序性能)之前,即使渲染 100 多个项目,切换选项卡也不会出现明显的延迟。现在加载甚至 24 都需要几秒钟(我切换到滚动动态渲染以加快速度,但它还不够好)。
平台信息:
- ios (tns ios 5.2.0, 5.3.1) [Angular 7]
- nativescript-ui-列表视图:6.1.0
- nativescript-ui-核心:2.0.1
- nativescript-ui-sidedrawer: 6.0.0
- 命令行界面:5.3.1
- 跨平台模块:5.3.1
- 运行时间:tns-ios 5.3.1
该问题似乎与某些嵌套结构 w/in 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 等子项的问题。我还尝试用 DockLayout 替换 GridLayout 并删除所有 angular *ngIfs 和 *ngClasses(并删除 Image 标签)以查看这是否会提高性能,但它似乎没有任何效果。仅加载 24 个项目仍然非常慢。 (对于更少的项目,加载确实显着增加 - 但我最初不能显示少于 24 个)
有什么想法吗?我宁愿不必降级我的 angular 和 nativescript 依赖项
我从使用
ListViewStaggeredLayout 到 ListViewGridLayout。这个问题在 {N} 和 angular 的早期版本中并不存在,所以它看起来像是某个地方的更新导致它滞后。
问题:
我有一个 angular-nativescript 应用程序需要在网格中显示一些项目。我正在使用 RadListView 来呈现列表,并且在过去几个月升级我的 angular、{N} 和其他库依赖项之后,我注意到项目的 RadListView 呈现速度变得非常慢。我有多个 "tabs" 所以你可以看到不同类型的项目,每当你切换 "tabs" 它需要用新的时间完全重新渲染列表。在进行一些升级(我曾希望这会提高应用程序性能)之前,即使渲染 100 多个项目,切换选项卡也不会出现明显的延迟。现在加载甚至 24 都需要几秒钟(我切换到滚动动态渲染以加快速度,但它还不够好)。
平台信息:
- ios (tns ios 5.2.0, 5.3.1) [Angular 7]
- nativescript-ui-列表视图:6.1.0
- nativescript-ui-核心:2.0.1
- nativescript-ui-sidedrawer: 6.0.0
- 命令行界面:5.3.1
- 跨平台模块:5.3.1
- 运行时间:tns-ios 5.3.1
该问题似乎与某些嵌套结构 w/in 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 等子项的问题。我还尝试用 DockLayout 替换 GridLayout 并删除所有 angular *ngIfs 和 *ngClasses(并删除 Image 标签)以查看这是否会提高性能,但它似乎没有任何效果。仅加载 24 个项目仍然非常慢。 (对于更少的项目,加载确实显着增加 - 但我最初不能显示少于 24 个)
有什么想法吗?我宁愿不必降级我的 angular 和 nativescript 依赖项
我从使用 ListViewStaggeredLayout 到 ListViewGridLayout。这个问题在 {N} 和 angular 的早期版本中并不存在,所以它看起来像是某个地方的更新导致它滞后。