Ionic Radio Button在iPad Air上响应时间长

Question

我正试图创建一个显示问卷的应用程序，但每当我按下单选按钮时，响应都会延迟至少几秒钟。然而，只有当我在iPad Air上测试应用程序时，或者当我在谷歌开发工具中将CPU节流设置为6倍减速时，这个问题才会出现。我正在开发的电脑有一台2.8千兆赫的英特尔i5-760。我还发现，减少单选按钮的数量也可以提高性能。目前，我有30-50个问题，每个问题在一个页面上有3个单选按钮，所以大约有90-150个单选按钮——这可能是因为我在一页上有太多的按钮。不过我不确定。

下面的代码显示了我用来显示答案的HTML：

<div *ngFor="let question of Questions" radio-group formControlName="{{'question' + question.Id}}" class="question-container" [ngClass]="{'custom-highlight': question.Highlight}">
<div text-left class="question">
<h3>{{question.QuestionText}}</h3>
</div>
<div text-wrap class="answer-container">
<ion-list mode="md" no-lines>
<ng-container *ngFor="let answer of question.Answers">
<div class="answer">
<ion-item no-padding mode="md" class="no-background">
<ion-label mode="md" [innerHTML]="answer.Label | translate"></ion-label>
<ion-radio mode="md" id="answer{{answer.Id}}" item-start value="{{answer.Label}}" checked="{{questionnaireForm.get('answer' + answer.Id).value ? questionnaireForm.get('answer' + answer.Id).value : false}}" (click)="clicked(answer)"></ion-radio>
</ion-item>
<div *ngIf="questionnaireForm.get('answer' + answer.Id).errors" class="text-danger">
<small text-left>{{getErrorMessageForAnswer(questionnaireForm.get('answer' + answer.Id).errors)}}</small>
</div>
<small text-left *ngIf="answer.Hint" class="form-text text-muted" [innerHTML]="answer.Hint"></small>
</div>
</ng-container>
</ion-list>
</div>

我试着在方法的开头和结尾记录Date.now()来计时我的答案。由于这个方法是递归的，所以我在递归方法的末尾放了一个console.log(Date.now())。这种方法总是在约100ms-150ms内完成。我不确定这是否是为我的方法计时的正确方式，所以我有点怀疑，我的代码实际上可能是垃圾。

我还检查了谷歌开发工具的探查器，它向我展示了这个谷歌开发工具探查器。我不知道这意味着什么，也不知道调用了哪些事件，因为我尝试从单选按钮中删除了单击事件，但它仍然调用了相同的事件。

请帮忙，如果你帮了，谢谢。

Answer 1

根据我的发现，低端手机上的单选按钮之所以反应如此之晚，是因为我试图加载的元素数量太多。有时我会提出52个问题，每个问题有3个选项。这降低了应用程序的速度。为了解决这个问题，我实现了ngx虚拟滚动器，因为Ionic虚拟滚动器出于某种原因不想加载项目。这可能与公司的应用程序结构有关。但这是另一天的问题。