Performance 更快地呈现数据角度2

我一直在试图找出如何最好地使用angular2来更快地渲染数据，而使用Edge F12 profiler时，似乎发生的事情太多了，通常需要250-500毫秒（在核心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>

数
地区
所有者
使用者
发送
结束日期
结束日期
签署
时间1
时间2
单位
地位
{{evaluation.number}
{{evaluation.area | jsonTranslate}}
{{evaluation.ownerName}
{{evaluation.userName}
{{evaluation.sent}日期：'yyyy-MM-dd'}
{{evaluation.endDateUser}日期：'yyyy-MM-dd'}
{{evaluation.endDateOwner}日期：'yyyy-MM-dd'}
{{evaluation.signedDate}日期：'yyyy-MM-dd'}
{{evaluation.time1}}
{{evaluation.time2}}
{{evaluation.companyName}
{{evaluation.status}

试试这个：

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

使用

trackBy

Angular应该附加行，而不是重建所有行。

尝试以下操作：

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

---

使用

trackBy

Angular应该附加行，而不是重新生成所有行。

首先，如果启用prodMode和AoT编译，请尝试此操作。我已尝试启用prodMode，虽然它确实有帮助，但仍然感觉很慢。在prodMode中，我确实获得了与angular1相同的性能（很难确切知道，因为我已经有6个月没有在这个项目中使用angular1了）。AoT真的很难实现（至少在使用webpack时），因为它强制第三方软件包为它编码，我正在看你的ng2文件上传…首先尝试一下，如果你启用prodMode和AoT编译的话。我已经尝试过启用prodMode，虽然它确实有帮助，但仍然感觉很慢。在prodMode中，我确实获得了与angular1相同的性能（很难确切知道，因为我已经有6个月没有在这个项目中使用angular1了）。AoT真的很难实现（至少在使用webpack时），因为它迫使第三方软件包为它编码，我正在看你的ng2文件上传。。。