许多元素上的 ngClass 使网站速度非常慢

Question

我目前正在我的 Angular 6 应用程序中制作树视图，我开始工作（嵌套和所有内容）。我遇到的一个问题是，当我的页面有很多元素（几千个）并且它们都[ngClass]在上面（根据所选节点显示不同的颜色）时，页面往往会挂很多。我创建了一个 StackBlitz 来展示我的问题：https ://stackblitz.com/edit/angular-atveai

要测试它，只需按住右侧输出屏幕上的向上/向下箭头键。它应该很慢。如果您将循环设置为仅显示 100 个元素而不是 10000 个，则它可以完美运行（因为元素较少）。

为了捕捉 keydown 事件（我想要在我的文档中），我这样做：

@Component({
  host: {
    '(document:keydown)': 'handleKeyboardEvent($event)'
  }
})

这handleKeyboardEvent()与$event对象一起调用。

在 HTML 文件中，我有一个非常简单的*ngFor，其中每个元素都有一个[ngClass]="GetClass(item)". 基本上这会返回一个包含所有应该应用的类的对象。在我的情况下，如果所选节点等于元素，则设置obj["selected"] = true，以便一个元素获得selected类。

我可以想象，这要求很高，因为每个元素都会多次调用此方法。这将是我对为什么这很慢的猜测。

我的页面很容易有 5000 到 10000 个节点（如果有办法解决这个问题，我们真的不想改变这一点）。但是，根节点的数量可能在 10 到 30 个之间。许多节点作为子节点嵌套（基本上其中 99% 是嵌套的）。

我的想法是，停止[ngClass]从听的变化，如果父节点不扩大。未展开 = 无论如何都未显示在页面上。

所以真正的问题是：如果满足条件，是否可以阻止元素监听变化？如果是这样，它甚至会有所帮助吗？因为这基本上会引入另一个侦听器，这不会真正解决任何问题。

Answer 1

所以我让它有点像这样工作：

1) 使用变化检测 OnPush

@Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      host: {
        '(document:keydown)': 'handleKeyboardEvent($event)'
      },
      changeDetection: ChangeDetectionStrategy.OnPush
    })

2）使用模板插值代替函数调用

<span class="{{item.state === 'failed' ? 'failed' : 'completed'}} {{item.ordering === selected ? 'selected' : ''}}">{{item.name}}</span>

它在 5000 行时工作得很快，但在 10000 行时仍然很慢。不幸的是，我能做的最好。

https://stackblitz.com/edit/angular-1sg1mh?file=src%2Fapp%2Fapp.component.ts