使用大量內容可編輯 div 時，Angular 6/Ionic 4 PWA 的性能下降

Question

我遇到了非常緩慢的性能，尤其是在舊機器上嘗試在內容可編輯框之間移動時。

我認為這可能是由於寫入 DOM 的節點數量過多。 顯示所有這些節點對我來說很重要，因為它用於比較分析。

我試圖實現的一個例子如下：-

for (let i = 0; i < 10000; i++) {
  this.testArray.push(i);
}

<ng-container *ngFor="let row of testArray">
    <div contentEditable="true">{{row}}</div>
</ng-container>

我在 x6 減速時使用 chromes 性能 cpu 節流來模擬這一點。

在我的完整示例中，我也有綁定到這些元素的函數，但這里包含很多代碼。

我曾想過只將需要的內容加載到視圖中，但我不確定如何執行此操作，並且它需要在 x 軸和 y 軸上都可以滾動。

Answer 1

我認為優化應用程序性能的一種方法是在 NgZone 之外執行這些循環，並將更新發送到循環結束，這樣每次更改時都不會觸發操作，如果最后沒有觸發單個操作的循環。 在這里您可以找到更多信息

Answer 2

Angular 實際上有一個特性，叫做虛擬滾動。 它有一些限制，但可能是您所需要的。 有關更多信息，請閱讀此處https://material.angular.io/cdk/scrolling/overview#virtual-scrolling

還可以考慮使用分頁來減少頁面上的 div