ionic 4 列表渲染需要很长时间

Question

我正在使用 ionic 4，我的代码从 firebase 中提取数据。请求中有 40 个对象。我将它们推入一个数组，然后使用 ion-list 来渲染它。

渲染这 40 个对象需要 8-10 秒。我认为这是一个巨大的时间。下面是执行此操作的代码 html

<ion-content>
  <ion-searchbar style="padding-bottom:0px" placeholder="{{ 'CONTACT_SEARCH_PLACEHOLDER' | translate }}"  (ionChange)="doSearch()" [(ngModel)]="searchTerm" (ionClear)="searchReset()"></ion-searchbar>

  <ion-list>
    <ion-list-header>
        <ion-label>{{ 'FAVORITE_CONTACTS' | translate }}</ion-label>
    </ion-list-header>

    <ng-container *ngFor="let card of core.syncedCards">
      <app-contact-card *ngIf="card.favoriteContact == false" [card]="card"></app-contact-card>
    </ng-container>  
   </ion-list>

</ion-content>

名片组件html是

<ion-card  style="margin-top:5px">
  <ion-card-header [ngClass]="card.partyNumber == 'demo' ? 'demoCard' : 'realCard'">
    <ion-card-title>
        {{card.firstName}} {{card.lastName}}    
        <ion-icon name="more" mode="md" color="primary"  size="large"  style="float:right" (click)="showCardActions($event, card)"></ion-icon>
        <ion-icon *ngIf="card.partyNumber == 'demo'"  size="large"  style="float:right" color="danger" name="trash" (click)="deleteDemoCard(card.tempContactId)"></ion-icon>
        <ion-icon style="float:right" size="large" *ngIf="card.favoriteContact == true" color="warning" name="star" (click)="toggleFavorite(card)"></ion-icon>
        <ion-icon style="float:right" size="large" *ngIf="card.favoriteContact == false" color="warning" name="star-outline" (click)="toggleFavorite(card)"></ion-icon>
  </ion-card-title>
  <ion-card-subtitle>{{card.jobTitle}}<span *ngIf="card.dept != undefined && card.dept != ''">,&nbsp;{{card.dept}}</span></ion-card-subtitle>
</ion-card-header>
  <ion-card-content style="padding:0px">
    <ion-item (click)="viewCard(card)">
        <ion-thumbnail slot="start" class="profile-pic">
          <img *ngIf="card.profilePic  == undefined || card.profilePic == ''" src="assets/images/noPerson.jpg">
          <img *ngIf="card.profilePic  != undefined && card.profilePic != ''" [src]="card.profilePic">
        </ion-thumbnail>
        <ion-label class="ion-text-wrap">
           <ion-row><ion-col  class="ion-no-padding">{{card.company}}</ion-col></ion-row>
           <ion-row *ngIf="card.city != undefined && card.city != '' && card.state != undefined && card.state != ''"><ion-col  class="ion-no-padding">{{card.city}}, {{card.state}}</ion-col></ion-row>
           <ion-row *ngIf="(card.city == undefined || card.city == '') && card.state != undefined && card.state != ''"><ion-col  class="ion-no-padding">{{card.state}}</ion-col></ion-row> 
           <ion-row *ngIf="card.city != undefined && card.city != '' && (card.state == undefined || card.state == '')"><ion-col  class="ion-no-padding">{{card.city}}</ion-col></ion-row> 
       </ion-label>
      </ion-item>
      <ion-row class="ion-padding" style="padding-bottom:0px"> <ion-col size="auto" *ngIf="card.mobile != undefined && card.mobile != ''"> 
        <ion-icon name="phone-portrait" color="primary" size="large" (click)="callPhone(card.mobileCountryCode, card.mobile)"></ion-icon>
        </ion-col>
        <ion-col size="auto"  *ngIf="card.workPhone != undefined && card.workPhone != ''"> 
          <ion-icon name="call" color="primary" size="large" (click)="callPhone(card.workPhoneCountryCode, card.workPhone)"></ion-icon>
        </ion-col>
        <ion-col size="auto" *ngIf="card.email != undefined && card.email != ''">
            <ion-icon name="mail" color="primary"  size="large" (click)="sendMail(card.email)"></ion-icon>
        </ion-col>
        <ion-col size="auto" *ngIf="card.website != undefined && card.website != ''">
          <ion-icon name="globe" color="secondary"  size="large" (click)="openSite(card.website)"></ion-icon>
      </ion-col>
      <ion-col class="ion-text-right" *ngIf="card.status == globalVariables.SYNC_FAILED" style="font-size: small">CRM Sync failed</ion-col>
    </ion-row>
</ion-card-content>
</ion-card>

填充同步卡片的代码是

this.syncedCards = []
const res:any = await this.dataSvc.getPendingCards(this.getUserKey())
for(let cardQ of res) {
  if(cardQ._status == GlobalVariables.QUEUED || cardQ._status ==  GlobalVariables.REJECTED)
    continue

    var card = this.copyContactDataFromJson(cardQ)
    this.syncedCards.push(card)
}

12 月 23 日更新：我现在确定这不是网络问题。数据在不到一秒的时间内在 syncedCards 数组中可用。整个 8-10 秒都花在了渲染上。

Answer 1

所以，我不会关闭它，但有一件事产生了巨大的变化，我一生都在忽略它。

在创建构建时我没有使用 --prod 标志并且仅使用 --prod 标志将 UI 渲染时间从 25+ 秒缩短到 3-5 秒。

它仍然很高，但至少是可管理和可接受的，因为应用程序现在不再只是等待渲染而已。

ionic 4 列表渲染需要很长时间

ionic 4 list rendering takes a very long time

performance

ionic-framework

firebase-realtime-database

angularfire2

angular