1. Home
  2. Forum
  3. React - EJ 2
  4. TreeGrid with virtualization still slow to render

TreeGrid with virtualization still slow to render

Hi,

I am using TreeGrid for a largish dataset (~50K rows). I know it makes no sense to load 50K lines into a table so I am using the VirtualScroll feature.

In principle, VirtualScroll should still render quickly, but even though I can verify the data is getting injected quickly. it still takes over a minute for the TreeGrid to display. How could this be with virtualization? Am I doing something wrong? It feels like TreeGrid is still loading all 50K rows into the DOM, but that can't be right, could it?

I would think the TreeGrid should render almost instantaneously using just the visible data.

Any ideas?

Thanks,
Eric

12 Replies 1 reply marked as answer
EF Eric Forgy August 25, 2020 08:38 AM UTC

Btw, for a sanity check, I just implemented the virtual table with the same 50K rows using react-virtualized and, as expected, it loads almost instantaneously and scroll virtually, as expected, where TreeGrid with VisualScroll takes more than a minute (closer to 5 minutes) to render.

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team August 25, 2020 02:07 PM UTC

Hi Eric, 

Thanks for contacting Syncfusion Support. 

Query1#:- I would think the TreeGrid should render almost instantaneously using just the visible data. 
 
We have checked your reported problem by preparing the sample with 50K rows but we are unable to reproduce the problem at our end. Refer to the sample Link:- 

In the below Screenshot visible data has been rendered on DOM elements. 

 

Query#2:- where TreeGrid with VisualScroll takes more than a minute (closer to 5 minutes) to render. 
 
Also we have checked the above problem on DataBinding Time using DataBound event of the TreeGrid, it takes around 3 to 5 seconds to render. Refer to the Screenshot:- 
 

You can also test the attached sample. If you are using facing same issue after checking Time calculation similar to above sample, Share us the following details 

  1. Complete TreeGrid code example.
  2. How you have tested Data Loading time in TreeGrid.
  3. Elements that have rendered on DOM as like first screenshot.
  4. If possible replicate the issue in the above sample and revert us back.
  5. Package version details.
  6. Have you faced the issue in any specific scenario?

From the above details we will replicate the problem at our end and provide you solution as early as possible. 

Regards, 
Farveen sulthana T 


Marked as answer
EF Eric Forgy August 25, 2020 06:49 PM UTC

Hi Farveen,

Thank you for looking into this for me. I will try to put together a MWE for you. I'll also have a look at the sample you provided. However, I am a little concerned if the best case I can expected is >5 seconds to render a TreeGrid with ~50K (virtual) rows. That is not really acceptable for my application. In your screenshot, you show 18 DOM elements. That should render almost instantaneously. Is the bottle neck in loading data? If so, it seems there should be a lot of room to optimize that. Any suggestion you have are welcome.

For reference, react-virtualized can load and display my ~50K (virtual) rows in less than 100ms.

I will also try it with just a single TreeGrid. I actually have multiple TreeGrids on the same page. I wonder if two TreeGrids could be interfering with each other. The last time I tried using TreeGrid, I had another problem with multiple TreeGrids:

https://www.syncfusion.com/forums/154280/multiple-treegrids-on-the-same-page

and that got sorted in a subsequent release, which I appreciated 👍

PS: I am working on an important demo and this is a real blocker for me. I hope we can resolve it and I appreciate your help 🙏

EF Eric Forgy August 25, 2020 07:20 PM UTC

Btw, I just tried with a single TreeGrid and it doesn't help, so that isn't the problem.

EF Eric Forgy August 25, 2020 10:19 PM UTC

Quick update...

I see one difference. I was putting the 50K row dataset directly into the dataSource attribute. The sample you provided uses ref and dataBound. Still reading up on that...

EF Eric Forgy August 26, 2020 08:15 AM UTC

Another update...

 
I've now forked this and modified it into a functional component (more similar to what I have):

https://stackblitz.com/edit/react-lhksdf-mp1ecp

and get similar performance. It takes me just over 2 seconds to render 50K rows. That is acceptable, but not great. I wish it could be faster.

That still doesn't fix my problem though because my actually case is still taking forever (<2 minutes), but there remain some differences. For example, I will have many tables all with different headers, so I am generating the `ColumnDirective`s on the fly. 

I'll try forking this fork and make the ColumnDirectives dynamic and see if I can reproduce the slow (>2 minutes) rendering. I don't know why that would matter, but I'll give it a shot.

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team August 26, 2020 03:20 PM UTC

Hi Eric, 

We will validate your reported problem and provide you further details by 28th August 2020. 

Regards, 
Farveen sulthana T 


EF Eric Forgy August 26, 2020 11:09 PM UTC

Thank you Farveen.

I continue looking into this. I can reproduce your results (which are reasonable, but could possibly be optimized a bit) with 50K virtual rows and still trying to pinpoint the exact source of my issue. My treegrid takes more than 2 minutes to render.

As another step, I created a new fork


This one has two tables. One with 5000 rows and one with 45000 rows. This is closer to my actual case. The results are still ok (~2 seconds). I will create another fork and continue trying to reproduce the slow rendering. It is most likely me just doing something stupid.



EF Eric Forgy August 26, 2020 11:32 PM UTC

Quick update...

I am not very familiar with profiling / measuring performance of JS, but I just recorded the performance in the dev console (Chrome) and it looks like most of the time is spent in DataManipulation.convertToFlatData in data.js.

EF Eric Forgy August 26, 2020 11:46 PM UTC

I got it!


This takes about 2 minutes 20 seconds to render 50K rows (see attached).

The difference is that now I have no children. All 50K rows are at the top level. Without children, I probably don't need TreeGrid, but I've been experimenting and my first draft had children.

The fork above exactly reproduces my case. Any ideas how to speed this up?

Attachment: TreeGrid_852ae9d6.zip

EF Eric Forgy August 27, 2020 12:24 AM UTC

Last checkin...

I definitely feel stupid now. 

Since my grid did not have children, I should have used GridComponent instead of TreeGridComponent.

I originally tried TreeGrid because I wanted to have the parent rows be titles and the children be TreeGrids, but I couldn't figure out how to get a TreeGrid to work inside a TreeGrid in React. I should have switched to Grid when my data no longer had children.

When I use GridComponent instead of TreeGridComponent, it renders quickly. 

I wonder, if someone uses TreeGridComponent with data that has no children, could you fall back to using GridComponent instead for performance reasons? This would have saved me a bunch of time and could save someone time in the future.

BUT... I am happy it is working now and appreciate the help.

MP Manivannan Padmanaban Syncfusion Team August 27, 2020 09:02 AM UTC

Hi Eric, 

Thank you for the update. 

We 're glad to hear that your problem has been resolved. And we suggest that you use our Grid component if you don't have a hierarchy relationship ( i.e. children) in your dataSource. 

Regards, 
Manivannan Padmanaban 


Loader.
Up arrow icon