search

SAP / fundamental-ngx

Fundamental Library for Angular is SAP Design System Angular component library
https://sap.github.io/fundamental-ngx
Apache License 2.0
266 stars 126 forks source link

Performance issue with a large number of columns #11899

Closed Asbarn closed 4 days ago

Asbarn commented 5 months ago

BUG There's a performance issue when using a lot of custom columns inside fdp-table component

Proposal: Remove unused listeners and observers to free up the javascript thread. Right now there are too many subscriptions which can't be turned off if we don't need them. Also even with virtualScroll enabled, rows are being re-rendered even if they are not visible: note in the example that translate pipe is being triggered = page number * page size, when with virtual scroll it should be triggered just page size times. So when we scroll down 5-10 pages the table gets reloaded fully and page just freezes or takes >1 minute to refresh Also please take a second look at how you use "will-change" property: IMO you use it too much and it not only does not optimise table but slows it down

Can you handle that on the application side

We tried to switch to DataProvider and use virtual scroll but it only improved our performance slightly We tried to switch to signals and also use deferrable views but it didn't help

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

Angular: >17.1 Fundamental: >0.49.2

If this is a bug, please provide steps for reproducing it; the exact components you are using;

This bug is reproducible if you have a lot of columns and if you have custom columns, pipes and additional customisations in SCSS and HTML

Stackblitz example containing some of the source code: https://stackblitz.com/edit/wza6e3

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

Did you check the documentation and the API?

We checked the source code. Proposal provided above

Did you search for similar issues?

Yes, similar issues have been reported before but no solution has been provided

Is there anything else we should know?

I implemented the same table using core fd-table and it works much better. It still freezes on >5-10 page as it re-renders the whole table because it does not virtual scroll but it still works better than platform's version of table

IMPORTANT NOTE: Removing the check for innerText drastically improved the performance for us: Bild Can we do something about this line?

IMPORTANT: Please refrain from providing links or screenshots of SAP's internal information, as this project is open-source, and its contents are accessible to anyone.

droshev commented 4 months ago

We are working a new virtual scroll with #11443. Once it is done, we shall analyze this scenario. @Asbarn thanks for reporting the issue.

mikerodonnell89 commented 3 months ago

This was fixed with https://github.com/SAP/fundamental-ngx/pull/12015

mikerodonnell89 commented 2 months ago

Need to take fix from #12015 and apply it to main

mikerodonnell89 commented 4 days ago

closing as this was fixed on ng15 and we'll bring the changes from there to the main branch with a different issue