As we know, Angular is one of the most popular Frontend frameworks/libraries along with ReactJS and VueJS.
There are currently many projects developing based on Angular, including those at IVC.
Therefore, the Angular user community is very large, which is very helpful in solving problems encountered when developing with Angular.
You will always receive many useful answers from others in the community.
During the process of working with Angular, I also encountered some problems related to performance.
So, in this post, I want to share with you a problem that we often do not consider when working with Angular, which is rendering a list of large data but still ensuring the response time of the website.
1. What is Angular?
Angular is an open-source frontend JavaScript framework developed by Google and commonly used for building large-scale enterprise applications.
Based on TypeScript but also supports JavaScript.
To understand more about Angular, you can refer here: https://v16.angular.io/docs
2. Rendering a list of large data in Angular
To render a list in Angular, we can use the *ngFor directive. The *ngFor is Angular's repeater directive. It repeats the host element for each element in a list.
That's the easiest way to render a list in Angular. However, this method is only really useful in cases where you need to render a list of data that is not too large.
If you have a list of data that is too large, ensuring the response time of the website must be a top priority.
At this time, if you still use the above rendering method, it will take a lot of time to process and render to the UI, which is not good for the user experience.
So, how to render in case the data is too large?
3. Solution
To render a list of large data, we have many ways in Angular, such as implementing paging, lazy-loading...
However, in this post, we just focus on the lazy-loading solution.
Lazy-loading, simply put, is a solution to split data to render many times until the last element in the list is rendered.
If you have a list of data with a length of 10,000 elements.
You can split it and render 50 elements per time.
At this time, the website only needs the amount of resources to render 50 elements instead of 10,000 elements.
This will greatly improve the response time of the website.
4. Implementation
Firstly, we need to specify a custom TrackByFunction to compute the identity of items in an iterable.
If a custom TrackByFunction is not provided, the *ngFor directive will use the item's object identity as the key.
This means that when you push more data to the original data list, it will re-render almost all the data in the data list even though there are many similar elements.
Therefore, we need to customize a TrackByFunction to compute the identity of items in an iterable.
This means that when the server needs to render more data from the original list, it only needs to render the newly added elements. This helps reduce the resource load as well as the response time of the website.
A TrackByFunction usually looks like this:
Apply it to the *ngFor directive:
Next, split the data from the original list, and push a part of the data to the rendering list (state variable).
Each time the renderListLazy() method is called, it will push new elements to the original list, 50 elements at a time.
Your task is to choose when to call the renderListLazy() method again, such as when the user scrolls to the end of the displayed data list, or when the user clicks a trigger button.
5. Experimental results
Here are the experimental results when I compared the basic rendering method and the lazy rendering method, let's observe.
With the normal rendering method, when I rendered a list of 100,000 elements.
It takes ~7.5 s, it's very poor.
With the lazy rendering method, when I also rendered a list of 100,000 elements.
With lazy rendering, it takes ~9.75 ms, it's so fast.
Through the above test, we have seen the superiority of lazy-loading, with data of 100,000 elements, lazy-loading is ~780 times faster than normal-loading.
Moreover, the performance will be more different when the number of elements of the list increases.
6. Conclusion
Through this post, I have introduced a simple technique for optimizing rendering large data lists in Angular.
Hope it is useful for you and will be applied to future projects.
Thank you for reading!
[Reference Source]
https://v16.angular.io/docs
https://angular.dev/api/core/TrackByFunction?tab=description
https://www.pexels.com/photo/hand-holding-shield-shaped-red-sticker-11035543/ (image)
