angular - 输入超慢的 ionic 页面

Question

我的带有输入的 ionic 页面真的很慢。4 项选择有大约 800 毫秒的延迟。当关闭键盘时，一个白色的空白 block 会在屏幕上停留 500 毫秒。

这个应用程序有大约 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. 删除所有内联样式并将其放入相关页面的SCSS 文件或使用全局app.scss 文件。 内联样式不会缓存，也很难维护应用。

2. 使用以下 CLI 测试您的应用在真实设备上的性能:

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