Angular lags performance if multiple DOM elements inserted via dynamic component with binding

Question

I have created n-level nested expand/collapse functionality using dynamic components of angular 5.

Functionally everything is working fine but when I load multiple dom elements browser either crashes or scroll stops working (Jerky Scroll)

Basically its advanced reporting feature with user selected filters and group by dimensions that we are offering.

Here is how my developed feature works

1) User visits report page on the web app. 2) The user selects filters and groupby params according to which I generate div based table having multiple row.

Now I have kept condition checking that user can further expand/collapse row, based on the object which I am maintaining using group by. Here group by indicates the number of levels which user can utilize

For example, Group by parameters are Country, OS, Appname and Campaign, I will render first level table displaying data for all countries available with expand button for every row, on click of expanding button I render another table having Operating System (OS) data for that specific country and so on...

I have actually identified why performance issue occurs, it might be because I am checking for that specific expand/collapsed button identified by next groupby object and isCollapsed parameter. Because of that specific condition is checking multiple time periodically scroll either stops working or browser start performing slow

Here is video illustrating how it works and scrollbar performance

https://youtu.be/m1a2uxhoNqc

I can not upload code on plunker or any other online tool because it's already integrated into a platform that I am developing having actual data.

I am not able to add code here due to stackoverflow character limit but have created gist.

Here is url to access code:

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

I would like to make code more reusable will do it once performance issue is resolved.

Have a look into this and let me know my mistakes to improve code quality and performance issues.

Thanks.

Answer 1

The scroll effect you are seeing is reasonable given the amount of rows you are rendering (and the "complex" grouping logic behind it).

I would suggest to use some kind of virtual scroll component such as https://github.com/rintoj/ngx-virtual-scroller or the new https://material.angular.io/cdk/scrolling/overview#virtual-scrolling to reuse DOM nodes and considerably improve performance