Question

我一直在试图找出如何最好地使用angular2来实现更快的数据渲染，而使用Edge F12分析器看起来有太多的事情发生，通常它需要250-500ms之间（在核心i7u cpu上）呈现20个项目的列表。

据说Angular2比原来的Angular版本要快得多，我无法真正看到它，查询数据的http请求比渲染它的速度快得多。

我可以做些什么来加快速度？我试图改变ChangeDetectionStrategy，但它并没有真正帮助。我的想法是问题是Angular2似乎在元素之后添加元素而不是逐行渲染，甚至在计算完整结果之后。

这是html：

<table class="table table-striped table-bordered">
<thead>
    <tr>
        <th class="checkbox-col"><input type="checkbox" [(ngModel)]="checkAll" (ngModelChange)="toggleCheckboxes()" /></th>
        <th>Number</th>
        <th>Area</th>
        <th *ngIf="tableOptions.showOwner" class="visible-md visible-lg">Owner</th>
        <th *ngIf="tableOptions.showUser" class="visible-lg">User</th>
        <th *ngIf="tableOptions.showSentDate" class="visible-xl">Sent </th>
        <th *ngIf="tableOptions.showEndDateUser" class="visible-xl">End date</th>
        <th *ngIf="tableOptions.showEndDateOwner" class="visible-xl">End date</th>
        <th *ngIf="tableOptions.showSignedDate" class="visible-xl">Signed</th>
        <th *ngIf="tableOptions.showTime1" class="visible-lg">Time 1</th>
        <th *ngIf="tableOptions.showTime2" class="visible-lg">Time 2</th>
        <th *ngIf="tableOptions.showCompany">Company</th>
        <th *ngIf="tableOptions.showStatus">Status</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let evaluation of evaluations">
        <td>
            <input type="checkbox" [(ngModel)]="evaluation.checked" *ngIf="evaluation.showCheckbox" (click)="evaluationCheckboxClicked()"
            />
        </td>
        <td>
            <a [routerLink]="['/evaluationDetails', {evaluationId: evaluation.evaluationId}]">
                {{evaluation.number}}
            </a>
        </td>
        <td>
            <a [routerLink]="['/evaluationDetails', {evaluationId: evaluation.evaluationId}]">
                {{evaluation.area | jsonTranslate}}
            </a>
        </td>
        <td *ngIf="tableOptions.showOwner" class="visible-md visible-lg">
            {{evaluation.ownerName}}
        </td>
        <td *ngIf="tableOptions.showUser" class="visible-lg">
            {{evaluation.userName}}
        </td>
        <td *ngIf="tableOptions.showSentDate" class="visible-xl">
            {{evaluation.sent | date:'yyyy-MM-dd'}}
        </td>
        <td *ngIf="tableOptions.showEndDateUser" class="visible-xl">
            {{evaluation.endDateUser | date:'yyyy-MM-dd'}}
        </td>
        <td *ngIf="tableOptions.showEndDateOwner" class="visible-xl">
            {{evaluation.endDateOwner | date:'yyyy-MM-dd'}}
        </td>
        <td *ngIf="tableOptions.showSignedDate" class="visible-xl">
            {{evaluation.signedDate | date:'yyyy-MM-dd'}}
        </td>
        <td *ngIf="tableOptions.showTime1" class="visible-lg">
            {{evaluation.time1}}
        </td>
        <td *ngIf="tableOptions.showTime2" class="visible-lg">
            {{evaluation.time2}}
        </td>
        <td *ngIf="tableOptions.showCompany">
            {{evaluation.companyName}}
        </td>
        <td *ngIf="tableOptions.showStatus">
            {{evaluation.status}}
        </td>
    </tr>
</tbody>
</table>

Answer 1

试试这个：

<tr *ngFor="let evaluation of evaluations; trackBy: trackByFn">

并在您的组件中：

trackByFn(index, evaluation) {
  return index;  // or evaluation.evaluationId
}

使用trackBy Angular应该追加行而不是重建所有行。

更快地渲染数据angular2

1 个答案: