Angular2の長いリストレンダリングのパフォーマンスが低い

Question

私は、ユーザーの操作を含む履歴ストリームを持つアプリケーションを持っています。履歴は日または週単位で表示されます。ある日、約400-2kのイベントが表示されます。

アクションが発生する可能性があり、それぞれの表示方法が異なります（コメントやオブジェクトの変更など）。したがって、各ループの繰り返しには、各要素の最終的な構造を決定するロジックがあります。

問題はレンダリングに時間がかかり、〜1300個の要素が6秒間レンダリングされることです。私にとっては、そのようなことを待つのはかなり長い時間です。私は必要最小限にするためにコードを最適化しようとしましたが、私が得ることのできる最高のものは〜1300個の要素の6秒です。

もう一つの大きな問題は、レンダリング中にフリーズされたブラウザであり、そのような長い時間は受け入れられません。

私は何か間違ったことがあったか、解決できないAngular2の1週間の場所を発見したかどうかはわかりません。だから、どんなヒントも大歓迎です。 私は次のようなアドバイスに興味がありません。ページネーションを使用するか、無限のスクロールを使用して、私はそれをより速くかつ濁らせる方法を探しています。

これまで、サーバー側で履歴がレンダリングされ、結果がDOMに格納されるのは、イベントの数に関係なく、すばやくでした。さらにスクリーンショットは、実際のレンダリング時間がプロセスのほんの一部にすぎないことも示しています。 http://plnkr.co/edit/QrYmYezmlV3MkQV5bOA8?p=preview

メインレンダリング部：

私はこの問題を示しplunkerでレンダリングコードの簡略版を調製た

ルートngFor要素を

<div class="history-stream"> 
    <div *ngFor="let action of history" 
     class="activity" [ngClass]="{'first-of-user': action.firstOfUser, 'last-of-user': action.lastOfUser}"> 
    <p class="date" *ngIf="action.firstOfDay">{{ action.date | date:'mediumDate' }}</p> 
    <div class="user-entry" [ngSwitch]="action.type"> 
     <comment *ngSwitchCase="'comment'" [object]="action"></comment> 
     <modified *ngSwitchCase="'modified'" [object]="action"></modified> 
    </div> 
    </div> 
</div> 

コメント成分：

<div class="entry comment" [ngClass]="{'comment-resolved': object.extra.is_resolved}"> 
    <a href="{{ getDeleteUrl(object.extra.comment_id) }}" data-target="metabase-modal-ajax" class="comment-action">Delete</a> 
    <a href="#" class="comment-action" *ngIf="!object.extra.is_resolved" (click)="resolveComment($event)">Mark as resolved</a> 
    <a href="#" class="comment-action" *ngIf="object.extra.is_resolved" (click)="unResolveComment($event)">Unresolve</a> 
    <p class="action" [innerHTML]="object.action"></p> 
    <p>{{ object.comment }}</p> 
    <small class="text-muted">{{ object.date | date:'shortTime' }} <span class="dot">&middot;</span> {{ object.date | date:'shortTime' }}</small> 
</div> 

Modifiedイベントコンポーネント：

<div class="entry modified"> 
    <p class="action" [innerHTML]="object.action"></p> 
    <ul class="changes list-unstyled"> 
    <li *ngFor="let change of object.changes"> 
     <span class="attribute">{{ change.attribute }}:</span>&nbsp; 
     <modified-value [change]="change.from"></modified-value> 
     <span class="arrow">&rarr;</span>&nbsp; 
     <modified-value [change]="change.to"></modified-value> 
     <small class="time text-muted">{{ change.date | date:'shortTime' }} <span class="dot">&middot;</span> {{ change.date | date:'shortTime' }}</small> 
    </li> 
    </ul> 
</div> 

と修正値コンポーネント：

<span [ngSwitch]="getChangeType()"> 
    <span *ngSwitchCase="'complex'"> 
    <span *ngFor="let item of change"> 
     <span class="badge">{{ item.tag }}</span> 
     <span [ngSwitch]="isArray(item.value)"> 
     <span *ngSwitchCase="true"> 
      <span *ngFor="let valueItem of item.value" class="value tag">{{ valueItem }}</span> 
      <span *ngIf="isEmpty(item.value)" class="value text-muted">None</span> 
     </span> 
     <span *ngSwitchCase="false"> 
      <span *ngIf="item.value" class="value">{{ item.value }}</span> 
      <span *ngIf="!item.value" class="value text-muted">None</span> 
     </span> 
     </span> 
    </span> 
    </span> 
    <span *ngSwitchDefault> 
    <span *ngIf="change" class="value">{{ change }}</span> 
    <span *ngIf="!change" class="value text-muted">None</span> 
    </span> 
</span> 

また、いくつかのプロファイル記録のスクリーンショット：

Answer 1

日付フォーマットがかかりましたスクリプトの半分あなたの例の時間。

は、日付がなく、いくつかの修正

3.6s - scripting 
1.4s - rendering 

かなり大きな値とここhttp://plnkr.co/edit/ChqgowTWjOailPFcLs34?p=previewを参照してください。私は、オブザーバブルでのインクリメンタルレンダリングはここで便利だと思います。

Answer 2

Angularでパフォーマンスを改善するには、いくつかの方法があります。パフォーマンスを向上させるために不変なデータ構造を使用することについてはhttp://blog.mgechev.com/2015/03/02/immutability-in-angularjs-immutablejs/をお読みください。

読んだ後ご質問がありましたら教えてください。