vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-11 05:13:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

docs(challenge37): add video to readme

Browse Source
This commit is contained in:
thomas
2023-10-11 11:57:37 +02:00
parent c58869b1c7
commit 140da91f8f
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/src/content/docs/challenges/angular-performance/37-ngfor-biglist.md
View File

@@ -1,5 +1,5 @@
---
title: 🟠 NgFor Optimization Big List
title: 🟠 Optimize Big List
description: Challenge 37 is about learning how virtualization optimize big list rendering
sidebar:
order: 117
@@ -10,10 +10,13 @@ sidebar:
## Information
In this application, we can render a list of 100,000 individuals by clicking on the **loadList** button. If you open the Chrome developer panel by pressing **F12**, go to the <b>Source</b> tab, and expand the element to see the list, you will notice that all 100,000 elements are rendered in the DOM, even though we can only see about 20 elements in the viewport. This process takes a lot of time, which is why the application is very slow at displaying the list.
In this application, we will render a list of 100,000 individuals by clicking on the **loadList** button. If you open the Chrome developer panel by pressing **F12**, go to the <b>Source</b> tab, and expand the element to see the list, you will notice that all 100,000 elements are rendered in the DOM, even though we can only see about 20 elements in the viewport. This process takes a lot of time, which is why the application is very slow at displaying the list.
We can use the <b>Angular DevTool</b> to profile our application and understand what is happening inside our application. I will show you how to do it inside the following video.
<video controls src="https://github.com/tomalaforge/angular-challenges/assets/30832608/713403fa-2eda-49d5-a7c9-acdef8aacd34">
</video>
:::note
If you don't know how to use it, read [the performance introduction page](/challenges/angular-performance/) first and come back after.
:::