我使用 angular 5 的动态组件创建了 n 级嵌套展开/折叠功能。
从功能上讲，一切正常，但是当我加载多个 dom 元素时，浏览器要么崩溃要么滚动停止工作(生涩滚动(
基本上，它的高级报告功能具有用户选择的过滤器，并按我们提供的维度分组。
这是我开发的功能的工作原理
1( 网页应用的用户访问报告页面。 2(用户选择过滤器和分组参数，根据这些参数，我生成具有多行的基于div的表。
现在我一直在进行条件检查，以便用户可以根据我使用分组依据维护的对象进一步展开/折叠行。此处分组依据表示用户可以使用的级别数
例如，按参数分组是国家/地区、操作系统、Appname 和活动，我将渲染第一级表，显示所有国家/地区的数据，每一行都有展开按钮，单击展开按钮时，我渲染另一个表，其中包含该特定国家的操作系统 (OS( 数据等等......
我实际上已经确定了发生性能问题的原因，这可能是因为我正在检查下一个 groupby 对象和 isCollapsed 参数标识的特定展开/折叠按钮。由于该特定条件是多次检查定期滚动停止工作或浏览器开始执行缓慢
这是说明其工作原理和滚动条性能的视频
https://youtu.be/m1a2uxhoNqc
我无法在 plunker 或任何其他在线工具上上传代码，因为它已经集成到我正在开发的具有实际数据的平台中。
由于堆栈溢出字符限制，我无法在此处添加代码，但已创建要点。
以下是访问代码的网址：
https://drive.google.com/drive/folders/1ZxAS8yHd8iHJ6ds3mZhLR0bw6o0cnRL6?usp=sharing
我想让代码更可重用，一旦性能问题得到解决。
看看这个，让我知道我的错误，以提高代码质量和性能问题。
谢谢。
考虑到您渲染的行数(以及它背后的"复杂"分组逻辑(，您看到的滚动效果是合理的。
我建议使用某种虚拟滚动组件(例如 https://github.com/rintoj/ngx-virtual-scroller 或新 https://material.angular.io/cdk/scrolling/overview#virtual-scrolling 来重用DOM节点并显着提高性能