1

Okay so I have around 20k records and 29 columns of text-only data that i fetch from a back-end into an Angular app.

once I get the data from the server (takes around 1s) I bind it to a field in a component and then use an HTML table combined with *ngFor to display all the data.

Chrome takes about 58 seconds to render everything in one go and scripting time is around 10s.

it is a big requirement for my company to be able to see results in the page in under 2.5s from the moment I click on the link to the component without using pagination or infinite scrolling.

what are my options to achieve such performance?

Improve this question

1 Answer 1

Reset to default
2

It's hard to tell with limited knowledge about the app and model but I see 2 options (you can go for one or both):

  • lazy load paginated table content. I don't know which (if any) UI framework you're using but you can check how it's handled in NgPrime for instance Lazy table

EDIT: It can be realized in few ways: First: if backend is problem (not in this case) you can request only slice of data from backend and handle it with some library like NgPrime Second: if you're not using any framework you can use something like virtual scroll Virtual scroll

  • slim down model which is sent over the backend. If large collection of objects has some nested objects as props it can significantly slow down both download and rendering. Instead of having nested object you can decide whether you really need all data which is trasferred and make some light object instead.

Also check out dev tools and analyse loading performance to get more info: Find bottlenecks in chrome dev tools

EDIT: With more data provided from comments, I would use virtual-scroll or similar mechanism (it loads and renders html dynamically).

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

thank you for your answer. Could you tell me what you mean by lazy loading paginated table content?. What actually happens behind the scenes?
For the second option you offered, the objects getting sent over the network consist of only one level. So, no nested objects whatsoever. The amount of time taken to transfer the data from the server to the client using HTTP is around 1s after making use of ResponseCompression on the server. So, the actual overhead causing the delay is the rendering of the browser and the scripting of Angular
Currently we are comparing the performance to a desktop application performing the same feature. It takes around 2 seconds for all data to get displayed (with thumbnails) on the Desktop app. We wanted to achieve the same results on the Web. Is that even possible?
thank your for the update. I will mark it as an answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.