1

在我的应用程序的性能问题上，我一直在努力（很长时间），这涉及使用分段按钮进行列表切换。

我正在使用虚拟滚动来提高性能，因为只有 200 个元素的 ngFor 循环非常慢。

在我的模板中：

  <ng-container *ngIf="currentList$ | async as currentList" class="full-height">

  <card-game-list
    [gameList]="currentList"
    [isWishList]="currentList.settings.url === 'wishlist'"
  ></card-game-list>
  </ng-container>

 </ion-content>
 <ion-footer >
  <ion-toolbar>
  <!-- LIST BUTTONS-->
  <ion-segment  *ngIf="boardGames.gameLists$ | async as lists" (ionChange)="selectList($event)">
    <ion-segment-button class="menuSegmentButton menuSegment{{list.settings.name}}"
                        *ngFor="let list of lists; let i = index"
                      [value]="list.settings.name"
                        [class.segment-button-checked]="(currentList$ | async)?.settings.name === list.settings.name"
    >
      <ion-icon [name]="list.settings.iconUrl" class="ion-no-margin"></ion-icon>
      <ion-label class="small-margin-bottom">
        {{ list.settings.name }}
        <ion-badge>
          {{ list.filteredGamesCount$ | async }}
        </ion-badge>
      </ion-label>
    </ion-segment-button>
  </ion-segment>
  </ion-toolbar>
</ion-footer>

这给出了这个： 主页截图

自定义组件“card-game-list”基本上是一个带有离子卡的虚拟卷轴，我可以提供任何需要的代码细节。

我遇到的问题： 从一个列表切换到另一个列表大约需要半秒，当我单击一个分段按钮时，会有短暂的延迟，然后一切都同时发生：显示另一个列表并产生连锁反应发生但以一种滞后的方式。

分析显示了这一点： 在此处输入图像描述

触发的动画帧占用了所有处理时间（0.5 秒），我不知道是否应该以这种方式工作。

我尝试过的：

  • 将检测策略更改为 OnPush -> 改进了问题但仍然存在
  • 我可以在 npm (+ cdk) 上找到的所有虚拟滚动 -> 他们都有自己不可接受的问题 :'(
  • 为虚拟滚动（纸牌游戏列表）提供更简单的组件-> 没有改变任何东西

更深入一点：我认为这与我切换列表的方式有关，也就是说

  public selectList($event) {
    const selectedList = $event.target.value;
    console.log(selectedList);
    this.boardGames.gameLists$.subscribe(lists => {
      this.listSubject.next(
        lists.find(list => list.settings.name === selectedList)
      );
    });
  }

我的自定义组件有问题...

我正在使用 RxJs observable 将新列表添加到组件的旁边，我觉得这不是最好的选择。

所以问题是：

  1. 使用这样的 observable 来切换列表似乎合法吗？
  2. 有没有办法首先调用波纹动画（立即）然后进行切换工作？
  3. 关于如何改善这一点的任何其他想法？

谢谢你的帮助

离子信息

Ionic:

   Ionic CLI                     : 5.4.16 (C:\Users\Piwi\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.1 (C:\DEV\tools\nodejs\node.exe)
   npm    : 6.13.4
   OS     : Windows 10
4

0 回答 0