mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-10 04:43:03 -05:00
feat(): homogenise file directory
This commit is contained in:
@@ -10,4 +10,4 @@ npx nx serve angular-bug-cd
|
||||
|
||||
### Documentation and Instruction
|
||||
|
||||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular-performance/32-angular-bug-cd/).
|
||||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/performance/32-angular-bug-cd/).
|
||||
|
||||
@@ -10,4 +10,4 @@ npx nx serve performance-default-onpush
|
||||
|
||||
### Documentation and Instruction
|
||||
|
||||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular-performance/34-default-onpush/).
|
||||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/performance/34-default-onpush/).
|
||||
|
||||
@@ -10,4 +10,4 @@ npx nx serve performance-memoized
|
||||
|
||||
### Documentation and Instruction
|
||||
|
||||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular-performance/35-memoize/).
|
||||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/performance/35-memoize/).
|
||||
|
||||
@@ -10,4 +10,4 @@ npx nx serve performance-ngfor-biglist
|
||||
|
||||
### Documentation and Instruction
|
||||
|
||||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular-performance/37-ngfor-biglist/).
|
||||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/performance/37-ngfor-biglist/).
|
||||
|
||||
@@ -10,4 +10,4 @@ npx nx serve performance-ngfor-optimize
|
||||
|
||||
### Documentation and Instruction
|
||||
|
||||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular-performance/36-ngfor-optimize/).
|
||||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/performance/36-ngfor-optimize/).
|
||||
|
||||
@@ -10,4 +10,4 @@ npx nx serve performance-scroll-cd
|
||||
|
||||
### Documentation and Instruction
|
||||
|
||||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular-performance/12-performance-scroll-cd/).
|
||||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/performance/12-performance-scroll-cd/).
|
||||
|
||||
|
Before Width: | Height: | Size: 129 KiB After Width: | Height: | Size: 129 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
@@ -19,7 +19,7 @@ In this challenge, we only need to refresh the view at a specific scroll positio
|
||||
To have a better visualization of the problem, profile your application with Angular Dev Tools.
|
||||
|
||||
:::note
|
||||
If you don't know how to use it, read [the performance introduction page](/challenges/angular-performance/) first and come back after.
|
||||
If you don't know how to use it, read [the performance introduction page](/challenges/performance/) first and come back after.
|
||||
:::
|
||||
|
||||
You can learn more details about zone pollution and how to resolve it [here](https://angular.io/guide/change-detection-zone-pollution).
|
||||
@@ -25,14 +25,14 @@ As you can see, each letter triggers a new change detection cycle, and all compo
|
||||
Let's use the <b>Angular DevTool</b> to profile our application and understand how this tool can help us understand what is happening inside our application.
|
||||
|
||||
:::note
|
||||
If you don't know how to use it, read [the performance introduction page](/challenges/angular-performance/) first and come back after.
|
||||
If you don't know how to use it, read [the performance introduction page](/challenges/performance/) first and come back after.
|
||||
:::
|
||||
|
||||
Now, start profiling your application and type some letters inside the input field to trigger some change detection cycles.
|
||||
|
||||
If you click on one of the bars (indicated by the yellow arrow in the picture below), you can see that `PersonListComponent`, `RandomComponent`, and all the `MatListItem` are impacted by the change detection cycle, even when we only interact with the input field.
|
||||
|
||||

|
||||

|
||||
|
||||
## Statement
|
||||
|
||||
@@ -27,14 +27,14 @@ We will not focus on the initial loading of the list in this challenge.
|
||||
Let's use the <b>Angular DevTool</b> to profile our application and understand how this tool can help us understand what is happening inside our application.
|
||||
|
||||
:::note
|
||||
If you don't know how to use it, read [the performance introduction page](/challenges/angular-performance/) first and come back after.
|
||||
If you don't know how to use it, read [the performance introduction page](/challenges/performance/) first and come back after.
|
||||
:::
|
||||
|
||||
Now, start profiling your application and type some letters inside the input field. You will see some red bars showing up inside the profiler panel.
|
||||
|
||||
If you click on one of the bars (indicated by the yellow arrow in the picture below), you will see that the change detection cycle is taking more than 3s in `PersonListComponent`.
|
||||
|
||||

|
||||

|
||||
|
||||
## Statement
|
||||
|
||||
@@ -21,7 +21,7 @@ We can also use the <b>Angular DevTool</b> to profile our application and unders
|
||||
</video>
|
||||
|
||||
:::note
|
||||
If you don't know how to use it, read [the performance introduction page](/challenges/angular-performance/) first and come back after.
|
||||
If you don't know how to use it, read [the performance introduction page](/challenges/performance/) first and come back after.
|
||||
:::
|
||||
|
||||
If you need more information about `NgFor`, I invite you to read the [documentation](https://angular.io/api/common/NgFor) first.
|
||||
@@ -18,7 +18,7 @@ We can use the <b>Angular DevTool</b> to profile our application and understand
|
||||
</video>
|
||||
|
||||
:::note
|
||||
If you don't know how to use it, read [the performance introduction page](/challenges/angular-performance/) first and come back after.
|
||||
If you don't know how to use it, read [the performance introduction page](/challenges/performance/) first and come back after.
|
||||
:::
|
||||
|
||||
## Statement
|
||||
@@ -20,7 +20,7 @@ This extension allows you to profile your application and detect performance iss
|
||||
|
||||
When you serve an Angular application, you can inspect a page by pressing <b>F12</b>, which will open the <b>Chrome developer tools</b>. Then navigate to the <b>Angular tab</b>. From there, you can select the <b>Profiler tab</b> as shown below.
|
||||
|
||||

|
||||

|
||||
|
||||
You can now profile your application by clicking on the record button. You can play with your application and see when change detection is triggered and which components are rerendered.
|
||||
|
||||
@@ -33,17 +33,17 @@ Now that you know how to use the <b>Angular DevTool</b>, you can choose a challe
|
||||
<LinkCard
|
||||
title="🟢 Default vs OnPush"
|
||||
description="Learn the difference between Default and OnPush change detection strategies."
|
||||
href="/challenges/angular-performance/34-default-onpush/"
|
||||
href="/challenges/performance/34-default-onpush/"
|
||||
/>
|
||||
|
||||
<LinkCard
|
||||
title="🟢 Memoization"
|
||||
description="Learn the power of pure pipes."
|
||||
href="/challenges/angular-performance/35-memoize/"
|
||||
href="/challenges/performance/35-memoize/"
|
||||
/>
|
||||
|
||||
<LinkCard
|
||||
title="🟠 Optimize Change Detection"
|
||||
description="Learn how to remove zone pollution."
|
||||
href="/challenges/angular-performance/12-scroll-cd/"
|
||||
href="/challenges/performance/12-scroll-cd/"
|
||||
/>
|
||||
@@ -68,7 +68,7 @@
|
||||
"label": "Angular"
|
||||
},
|
||||
{
|
||||
"value": "angular-performance",
|
||||
"value": "performance",
|
||||
"label": "Angular Performance"
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user