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

Question

我有一個包含用戶操作的歷史流應用程序。 歷史記錄按天或整周顯示。 在一天內，大約有大約400-2k的活動要展出。

可能發生的動作類型很少，並且每個動作的顯示方式不同（例如注釋或對象修改）。 因此，在每個循環迭代中存在一些邏輯以確定每個元素的最終結構。

問題是它有很多時間渲染，~1300個元素渲染大約6s。 對我來說，等待這樣的事情已經很久了。 我已經嘗試優化代碼以達到所需的最小值，但是我能得到的最好的是〜1300個元素的6s。

另一個更大的問題是在渲染過程中凍結瀏覽器，這是很長時間不可接受的。

我不確定我做錯了什么，或者我找到了Angular2的周點，這是無法解決的。 所以任何提示都是受歡迎的。 我對以下建議不感興趣：使用分頁或使用無限滾動，我正在尋找一種方法讓它更快更好地工作。

我還要補充說，以前歷史記錄是在服務器端呈現的，無論事件的數量如何，將結果放入DOM都非常快。 進一步的屏幕截圖還顯示，實際渲染時間只是整個過程的一小部分。

我在plunker中准備了渲染代碼的簡化版本，顯示了問題： http ：//plnkr.co/edit/QrYmYezmlV3MkQV5bOA8？p = preview

主要渲染部分：

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

修改事件組件：

<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

Angular 7引入了虛擬滾動功能。 它可以幫助顯着提高渲染性能 - 只有可見的部分列表被添加到DOM中。 但它也增加了一些限制，比如固定行大小

Answer 2

有一些提高Angular性能的好方法。 我建議你閱讀： http ： //blog.mgechev.com/2015/03/02/immutability-in-angularjs-immutablejs/關於使用不可變數據結構來提高性能。

如果您在閱讀后有任何疑問，請告訴我。