Angular 角度2性能和变化检测（5秒内1000次呼叫）

所以基本上，我是angular 2的新手，我为它接手了一个项目

我发现应用程序的性能相当慢，这是非常有问题的

我找不出是什么导致了演出的缓慢。然后我开始注意到很多ngIf和ngFor的调用函数。当我突然开始从这些函数中登录时，我发现实际上每秒有数百个调用

我真的没有什么有趣的东西可以在代码方面展示，但我想知道这是否应该是正常的

我看不出实际代码有什么问题。当然，ngFor的结果可以保存到一个变量中，但对ngIf的结果做同样的操作有点困难（而且有点无用？）。我读过changeDetection，但我无法确定它实际触发的频率

即使不改变网站上的任何内容（只是滚动），也会有很多函数调用

我想知道这是否正常

答案是肯定的

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

如果你的ngIf有很多指令，那么你就做错了

让您的条件尽可能苗条，这样

变更检测

性能就不会影响用户体验

我想知道这是否正常

答案是肯定的

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

如果你的ngIf有很多指令，那么你就做错了

---

请尽可能保持条件苗条，以便

变更检测

性能不会影响用户体验。

是的，有时变更检测会运行1000次，特别是在处理的DOM元素数量较高时

例如：在数组上的*ngFor循环中进行更改会破坏整个DOM并为列表部分重新构建它。这里每次都需要运行更改检测

虽然这是事实，但您可以遵循一些步骤来避免性能受到影响

1） 在

*ngFor

循环中使用

trackBy

：这将显著提高性能，因为angular尝试仅更改阵列的更改/新部分，而不是再次拆下和重建整个阵列

你可以在这里看到它的作用：

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

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

所选颜色为：{{selectedColor（）}

---

希望这能有所帮助。

是的，有时更改检测会运行1000次，特别是在处理的DOM元素数量很高的情况下

例如：在数组上的*ngFor循环中进行更改会破坏整个DOM并为列表部分重新构建它。这里每次都需要运行更改检测

虽然这是事实，但您可以遵循一些步骤来避免性能受到影响

1） 在

*ngFor

循环中使用

trackBy

：这将显著提高性能，因为angular尝试仅更改阵列的更改/新部分，而不是再次拆下和重建整个阵列

你可以在这里看到它的作用：

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

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

所选颜色为：{{selectedColor（）}

希望这有帮助