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

概述我使用angular 5的动态组件创建了n级嵌套展开/折叠功能. 功能上一切正常,但当我加载多个dom元素时,浏览器崩溃或滚动停止工作(Jerky Scroll) 基本上它的高级报告功能包括用户选择的过滤器和我们提供的维度. 以下是我开发的功能的工作原理 1)用户访问Web应用程序上的报告页面. 2)用户选择过滤器和groupby参数,根据该参数我生成具有多行的基于div的表. 现在我保持条件检查 我使用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

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

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

谢谢.

解决方法 根据您渲染的行数(以及其背后的“复杂”分组逻辑),您看到的滚动效果是合理的.

我建议使用某种虚拟滚动组件(如https://github.com/rintoj/ngx-virtual-scroller或新的https://material.angular.io/cdk/scrolling/overview#virtual-scrolling)来重用DOM节点并显着提高性能

总结

以上是内存溢出为你收集整理的如果多个DOM元素通过带有绑定的动态组件插入,则Angular会延迟性能全部内容，希望文章能够帮你解决如果多个DOM元素通过带有绑定的动态组件插入,则Angular会延迟性能所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。