데이터의 빠른 렌더링 angular2

저는보다 빠른 데이터 렌더링을 위해 angular2를 가장 잘 사용하는 방법을 알아 내려고 노력하고 있습니다. Edge F12 프로파일 러를 사용하는 동안 너무 많은 일이 발생하고 보통 250-500ms 핵심 i7u cpu)를 사용하여 20 개 항목의 목록을 렌더링합니다.데이터의 빠른 렌더링 angular2

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>

출처

2016-12-19 user1842278

prodMode 및 AoT 컴파일을 활성화 한 경우에도 먼저 시도하십시오. –

prodMode를 활성화하려고했지만 도움이되지만 느린 느낌입니다. prodMode를 사용하면 angular1과 동일한 퍼포먼스를 얻을 수 있습니다 (정확히 6 개월 동안이 프로젝트에서 앵귤러 1을 사용하지 않았기 때문에 정확하게 알 수 없습니다). AoT는 써드 파티 패키지에 코드를 강제로 적용하기 때문에 (적어도 webpack을 사용할 때) 구현하기가 정말 어렵다. ng2 파일 업로드를보고있다. – user1842278

이 시도 : 행을 추가해야 각도 대신에 그들 모두를 재건 trackBy와

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

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

및 구성 요소에

출처

2016-12-19 20:25:53 Sasxa

데이터의 빠른 렌더링 angular2

답변

관련 문제