Wednesday, 31 October 2018

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

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 webapp. 2) 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 object which i am maintaining using group by. Here group by indicates 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 expand 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 of i am checking for that specific expand/collapsed button identified by next groupby object and isCollapsed parameter. Because of that specific conditon is checking multiple time periodically scroll either stops working or browser start performing slow

Here is video illustrating how it works and scroll bar performance

https://youtu.be/m1a2uxhoNqc

I can not upload code on plunker or any other online tool because its already integrated to 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 look into this and let me know my mistakes to improve code quality and performance issues.

Thanks.



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

No comments:

Post a Comment