离子页面输入超慢

Question

我输入的离子页面非常慢。 4项选择有800毫秒的延迟。当解除键盘操作时，白色的空白块在屏幕上停留500ms。

这个程序有大约10页的表格，但我所有的表格都很慢。请提出更好的方法来实施高绩效表格。

看看这个示例代码。

示例代码：

<ion-content > 

    <div class="confirmform" style="padding:5px;"> 

    <div class="confirmitem" *ngFor="let room of rooms; let i = index;"> 
     <ion-item class="roomheader"> 
     <ion-label>Room {{i+1}} Details</ion-label> 

     </ion-item> 
     <!-- item --> 

     <div class="adultitem" *ngFor="let adult of room.adults;let x = index"> 
      <ion-item > 
       <ion-label>Adult {{x+1}}</ion-label> 

      </ion-item> 
      <ion-row> 

      <ion-col> 
       <ion-item style="padding-top:22px;"> 

       <ion-select [(ngModel)]="adult.title" style="max-width: 100%;width:100%; padding-left: 2px;" interface="popover" placeholder="Title"> 
        <ion-option value="Mr">Mr</ion-option> 
        <ion-option value="Ms">MS</ion-option> 
        <ion-option value="Miss">Miss</ion-option> 
        <ion-option value="Mrs">Mrs</ion-option> 

       </ion-select> 
       </ion-item> 
      </ion-col> 
      <ion-col> 
       <ion-item style="padding-top: 22px; border-bottom: 1px solid #dedede;" class="checkitem"> 
       <ion-label>Lead Guest</ion-label> 
       <ion-checkbox color="dark" [(ngModel)]="adult.leadguest" tappable (click)="leadchecker(i,x)"></ion-checkbox> 
       </ion-item> 
      </ion-col> 
      </ion-row> 

      <ion-row> 
      <ion-col> 
       <ion-item> 
       <ion-label floating>First Name</ion-label> 
       <ion-input type="text" [(ngModel)]="adult.fname"></ion-input> 
       </ion-item> 
      </ion-col> 
      <ion-col> 
       <ion-item> 
       <ion-label floating>Last Name</ion-label> 
       <ion-input type="text" [(ngModel)]="adult.lname"></ion-input> 
       </ion-item> 
      </ion-col> 
      </ion-row> 

     </div> 

     <!-- children --> 


     <div class="adultitem" *ngFor="let child of room.children;let x = index"> 
     <ion-item > 
      <ion-label>Children {{x+1}}</ion-label> 

      </ion-item> 
     <ion-row> 
      <ion-col> 
      <ion-item style="padding-top:22px;"> 

       <ion-select [(ngModel)]="child.title" style="max-width: 100%;width:100%; padding-left: 2px;" interface="popover" placeholder="Title"> 
       <ion-option value="Master">Master</ion-option> 
       <ion-option value="Miss">Miss</ion-option> 

       </ion-select> 
      </ion-item> 
      </ion-col> 

     </ion-row> 
     <ion-row> 
      <ion-col> 
      <ion-item> 
       <ion-label floating>First Name</ion-label> 
       <ion-input type="text" [(ngModel)]="child.fname"></ion-input> 
      </ion-item> 
      </ion-col> 
      <ion-col> 
      <ion-item> 
       <ion-label floating>Last Name</ion-label> 
       <ion-input type="text" [(ngModel)]="child.lname"></ion-input> 
      </ion-item> 
      </ion-col> 
     </ion-row> 

    </div> 

     <ion-row> 
      <ion-col col-9> 
       <p style="color:red;font-size: 12px;">Cancellation Policy :</p> 
       <p style="color:red;font-size: 12px;" *ngFor="let policy of cp[i]" [innerHTML]="policy"></p> 

      </ion-col> 

      <ion-col col-3> 
       <h2 style="color: #484343;font-size: 16px;">Cost {{currency}} {{room.total}}</h2> 
      </ion-col> 
     </ion-row> 
    </div> 

<!-- contact section --> 

<div class="confirmitem"> 
    <ion-item class="roomheader"> 
     <ion-label>Contact Info</ion-label> 
     </ion-item> 
    </div> 

    <ion-row> 

     <ion-col> 
      <ion-item style="padding-top:22px;"> 



      <ion-label floating >Country </ion-label> 
      <ion-input [(ngModel)]="contact.country.country_name" (click)="opencountry()" ></ion-input> 
      </ion-item> 
     </ion-col> 
     </ion-row> 

     <ion-row> 
      <ion-col col-5> 
       <ion-item> 
        <ion-label floating>Country code</ion-label> 
        <ion-input type="text" [(ngModel)]="contact.countrycode" ></ion-input> 
       </ion-item> 
      </ion-col> 

      <ion-col> 
       <ion-item > 
        <ion-label floating>Mobile Number</ion-label> 
        <ion-input type="number" [(ngModel)]="contact.homephone" ></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 

     <ion-row> 
      <ion-col > 
       <ion-item> 
        <ion-label floating>Email Address</ion-label> 
        <ion-input type="email" [(ngModel)]="contact.email"></ion-input> 
       </ion-item> 
      </ion-col> 

      <ion-col> 
       <ion-item > 
        <ion-label floating>Confirm Email</ion-label> 
        <ion-input type="email" [(ngModel)]="contact.email2" ></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 

     <ion-row> 
     <ion-col> 
      <button ion-button color="primary" style="margin:0 auto;display:block" (click)="submitBooking()">Proceed to Booking</button> 
     </ion-col> 
     </ion-row> 

    </div> 
</ion-content> 

请给我建议的方式，以提高网页的性能。

Answer 1

可以提高页面的性能做如下建议：

1. 删除所有inline styles，并提出，在相关页面的SCSS文件或使用全局app.scss文件。 Inline styles不会缓存，也很难维护应用程序。

2. 测试您的应用程序的使用低于CLIs真实设备的性能：

   ionic cordova build android --prod 
   
   ionic cordova build ios --prod