Angular：更多组件会导致性能下降吗？

Question

我有一个递归调用自己以创建树的组件。有时，这棵树可能真的很大（超过100个级别）。当树很大时，我注意到性能大幅下降，但无法弄清楚是什么原因造成的。最好不创建一个递归组件，而仅使html递归，或者组件的数量与性能无关，这意味着问题出在其他地方？

Answer 1

主要原因是Angular 脏检查机制。

如果页面上出现以下三种情况之一，则“ Angular”会检查此树结构中的所有组件，以防发生更改。

• 事件监听器。 DOM事件侦听器可以更新Angular组件中的数据，还可以触发更改检测。
• 宏和微型任务。 setTimeout（），setInterval（），承诺...
• HTTP数据请求。（XHR请求。）

https://angular.io/guide/zone#when-apps-update-html

例如，您有一个输入元素，并且在此条目中输入了 a 。由于此过程包含在 EVENT （更改，键按下，按键）的范围内，因此 Angular 开始控制树中的所有组件。因此，拥有的组件越多，经过一段时间后，这个过程就越会成为噩梦。

那么解决方案是什么？

解决方案可以是“停止检查所有组件”以查找其他地方的更改。

为此，您必须根据更改检测策略编写所有组件。由于这是一个非常详细的主题，因此我将关键字保留在此处。您的组件必须采用 OnPush 策略。

https://angular.io/api/core/ChangeDetectionStrategy#OnPush

有关更多详细信息，您应该查看变更检测检测器。

https://angular.io/api/core/ChangeDetectorRef

您还可以使用 ngDoCheck 生命周期进行性能测试。您的组件每次检查都会进入此循环。

https://angular.io/api/core/DoCheck

Answer 2

是的，问题是要给组件充电很多时间， 如果您在组件中执行Sime操作（不要打印该组件，而是一个段落）

Answer 3

在浏览器中，打开“开发人员工具”，然后打开“性能”选项卡。您可以记录一段时间内使用的资源。

结果可以显示为不同的图形类型。那应该给您一些洞察力，确切说明什么功能正在使用资源。

然后，您可以优化该功能，或确定完全不同的方法可能会产生更好的结果。

Answer 4

这取决于您的组件在做什么。 建立一棵树后，我意识到了以下几点：

• 创建I / O组件以渲染级别；
• 管理父组件或服务中的逻辑；
• 仅赋予角度分量需要渲染的内容；
• 在这种情况下，请确保使用“ onPush”更改检测策略而不是默认值来完全控制更改检测；
• 为“ ngFor”使用“ trackBy”选项。这样可以避免重新渲染未更改的元素。
• 使用css类指令代替对特定树级别元素进行样式设置的指令。这需要更多的计算才能获取元素引用并为其设置类。