5

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

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

基本上它的高级报告功能具有用户选择的过滤器和我们提供的按维度分组。

这是我开发的功能的工作原理

1) 用户访问网络应用程序上的报告页面。2) 用户选择过滤器和 groupby 参数,据此我生成具有多行的基于 div 的表。

现在,我一直在检查用户是否可以根据我使用 group by 维护的对象进一步展开/折叠行。这里 group by 表示用户可以使用的级别数

例如,按参数分组是 Country、OS、Appname 和 Campaign,我将呈现第一级表,显示所有可用国家/地区的数据,每行都有展开按钮,单击展开按钮我呈现另一个包含操作系统 (OS) 数据的表对于那个特定的国家等等......

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

这是说明其工作原理和滚动条性能的视频

https://youtu.be/m1a2uxhoNqc

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

由于 stackoverflow 字符限制,我无法在此处添加代码,但已创建要点。

这是访问代码的网址:

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

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

看看这个,让我知道我的错误,以提高代码质量和性能问题。

谢谢。

4

1 回答 1

5

考虑到您正在渲染的行数(以及它背后的“复杂”分组逻辑),您看到的滚动效果是合理的。

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

于 2018-11-02T15:20:50.870 回答