CPU goes over 100% and page freezes when navigating large datasets in TreeGrid

[mydoal]

When scrolling and navigating datasets of hundreds of records with a 5 level Angular TreeGrid, the cpu goes above 100% and causes the page to freeze. High cpu is measured also even when navigating the TreeGrid in the show case.

It seems that there might be a design flaw with the angular change detection during runtime that does too many checks (e.g. nodes that are scrolled off screen or that are not visible).

This prevents us from using the component alltogether.

Is this a know issue? Is there a solution or workaround for this?

Thank you in advance.

 

 

[ivanpeevski]

Hi mydoal,

 

When working with large datasets, we recommend using the TreeGrid in Virtual Mode instead. We have an example in our demos section – https://www.htmlelements.com/angular/demos/grid/virtual-tree-grid/

 

In Virtual Mode, the child rows are generated through a callback whenever a row is expanded. In this way, the grid doesn’t need to process all records at once and it considerably improves performance.

 

Ivan Peevski
Smart UI Team
https://www.htmlelements.com

[mydoal]

Thank you for your prompt reply. Just to make sure before we continue to do more tests with the virtual tree grid, in case we theoretically expand all the nodes and scroll the expanded tree – will it have the same performance “problem” as the regular TreeGrid?

[Markov]

Hi,

It would be good, if you provide a stackblitz sample showing the behavior so we would be able to see, if there is some configuration issue, too. For example, if the height is auto and you load hundreds of items, the component will have to create ui element for each cell instead of reusing existing.

Regards,
Markov

[mydoal]

Thank you for your reply.

We are not able to show the exact scenario in stackblitz since the data is sensitive however, we managed to run the demo code from your website for the virtual TreeGrid and captured a video of the behavior of the cpu that goes over 50% when scrolling a relatively small table.

Is this the expected behavior?

For the tree that we tested that has over 1,000 nodes in 5 levels of hierarchy, even in the virtual TreeGrid, the cpu went over 100% and caused the page to freeze.

https://www.awesomescreenshot.com/video/21819946?key=cc97017072558a45c3669027acb30047

[Markov]

Hi,

We do not see an issue in this behavior. While you scroll, there are a lot of calculations happening. I cannot observe a delay in the scrolling, too. That is the reason I asked for a sample which demonstrates an issue, because if you have a TreeGrid with auto-height and if that is the case, all cells to be added to the DOM, your page will freeze for sure, because web pages can display only a certain amount of html elements.

Regards,
Markov

• This reply was modified 1 year, 1 month ago by Markov.

[Author]

Posts