离子页面输入超慢
问题描述:
我输入的离子页面非常慢。 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>
请给我建议的方式,以提高网页的性能。
答
可以提高页面的性能做如下建议:
删除所有
inline styles
,并提出,在相关页面的SCSS
文件或使用全局app.scss
文件。Inline styles
不会缓存,也很难维护应用程序。-
测试您的应用程序的使用低于
CLIs
真实设备的性能:ionic cordova build android --prod ionic cordova build ios --prod
你有没有找到一个妥善的解决办法?我没有内联样式和在角度生产模式的设备上测试和--prod does not似乎帮助 – thorne51