如果多个DOM元素通过带有绑定的动态组件插入，则Angular会延迟性能

Question

我使用angular 5的动态组件创建了n级嵌套展开/折叠功能。

功能上一切正常，但是当我加载多个dom元素时，浏览器崩溃或滚动停止工作（Jerky Scroll）

基本上它的高级报告功能包括用户选择的过滤器和我们提供的维度。

以下是我开发的功能的工作原理

1）用户访问Web应用程序上的报告页面。 2）用户选择过滤器和groupby参数，根据该参数我生成具有多行的基于div的表。

现在我保持条件检查，用户可以进一步扩展/折叠行，基于我使用group by维护的对象。 这里group by表示用户可以使用的级别数

例如，按参数分组是国家，操作系统，Appname和Campaign，我将使用展开按钮为每行显示所有可用国家/地区的数据，单击展开按钮我将呈现另一个具有操作系统（OS）数据的表对于那个特定国家等等......

我实际上已经确定了为什么会出现性能问题，这可能是因为我正在检查由下一个groupby对象和isCollapsed参数标识的特定展开/折叠按钮。 由于特定条件是多次定期检查滚动停止工作或浏览器开始执行缓慢

这是一段视频，说明了它的工作原理和滚动条性能

https://youtu.be/m1a2uxhoNqc

我无法在plunker或任何其他在线工具上上传代码，因为它已经集成到我正在开发的具有实际数据的平台中。

由于stackoverflow字符限制，我无法在此处添加代码，但已创建了gist。

这是访问代码的URL：

https://drive.google.com/drive/folders/1ZxAS8yHd8iHJ6ds3mZhLR0bw6o0cnRL6?usp=sharing

一旦性能问题得到解决，我想让代码更可重用。

看看这个，让我知道我的错误，以改善代码质量和性能问题。

谢谢。

Answer 1

根据您渲染的行数（以及其背后的“复杂”分组逻辑），您看到的滚动效果是合理的。