Question

所以基本上，我对angular 2还是很陌生，为此我接手了一个项目。

我发现该应用的性能非常慢，这是个问题。

我找不到导致性能下降的原因。然后，我开始注意到很多ngIf和ngFor的调用函数。当我突然开始从这些功能登录时，我发现每秒实际上有数百个调用。

我真的没有什么有趣的东西可以显示代码，但是我想知道这是否应该正常吗？

我看不到实际代码有什么问题。当然，可以将ngFor的结果保存到变量中，但是要对ngIf进行相同的操作则比较困难（有点无用？）。我读了有关changeDetection的文章，但我无法确定它应该实际触发的频率。

即使不更改网站上的任何内容（只是滚动），对函数的调用也是如此。

Answer 1

我想知道这是否应该正常吗？

答案是肯定的。

您将函数绑定到ngIf。 Angular需要跟踪您的函数并尽可能快地渲染条件元素。

如果您有一个包含许多指令的ngIf，则说明您做错了。

使您的条件保持尽可能苗条，这样ChangeDetection的性能就不会损害用户体验。

Answer 2

是的，有时更改检测会运行1000多次，尤其是当要操纵的DOM元素数量很高时。

例如：数组的* ngFor循环中的更改将删除整个DOM并将其重构为列表部分。这里，变更检测需要每一次运行。

这是对的，但是您可以按照一些步骤进行操作，以避免性能下降。

1）在trackBy循环上使用*ngFor：：由于angular尝试仅对数组的更改/新部分进行更改，而不是对数组的新部分进行更改，因此这可以显着提高性能。拆除并再次重建整个阵列。

您可以在这里看到它的运行情况：angular docs

2）不要在字符串插值中使用函数，如下所示：

<div>the selected color is: {{selectedColor()}}</div>

希望这会有所帮助。