Angular2中长列表渲染的性能不佳

Question

I have an application with a history stream, containing user actions. The history is displayed by days or whole weeks. During one day there is approximately around 400-2k of events to display.

There are few types of actions that may occur and each one is displayed differently (eg comment or object modification). Therefore there is some logic in each loop iteration to determinate the final structure of each element.

The problem is that it lots of time to render, ~1300 elements renders around 6s. For me it is pretty long time to wait for such thing. I have tried to optimise the code to do the required minimum, but still the best I could get is 6s for ~1300 elements.

The other bigger problem with that is freezed browser during the rendering which is not acceptable for such long time.

I'm not sure if I have done something wrong or I have found a week spot of Angular2 which is not possible to resolve. So any hint is welcome. I'm not interested in advices like: use pagination or use infinite scroll, I'm am looking for a way to make it work faster and smother.

I will also add that previously the history was rendered on the servers side and putting the result into the DOM was super quick, no matter of the number of events. Further screenshots also shows that the real rendering time is just a very small part of the process.

I have prepared simplified version of the rendering code in the plunker which shows the problem: http://plnkr.co/edit/QrYmYezmlV3MkQV5bOA8?p=preview

The main rendering parts:

Root ngFor element

<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>

Comment component:

<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 event component:

<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>

And modified-value component:

<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>

Also a few screenshots of profiles recording:

Answer 1

Angular 7 introduced virtual scroll feature. It can help dramatically increase render performance - only visible part of list is added to DOM. But it also add some restrictions, like fixed row size

Answer 2

There are a few good ways to improve performance in Angular. I would suggest you read this: http://blog.mgechev.com/2015/03/02/immutability-in-angularjs-immutablejs/ on using immutable data structures to improve performance.

Let me know if you have any questions after reading.