feat(): homogenise file directory

This commit is contained in:
thomas
2023-10-18 10:41:06 +02:00
parent 103ce73a39
commit f72782ee4c
16 changed files with 18 additions and 18 deletions

View File

Before

Width:  |  Height:  |  Size: 129 KiB

After

Width:  |  Height:  |  Size: 129 KiB

View File

Before

Width:  |  Height:  |  Size: 87 KiB

After

Width:  |  Height:  |  Size: 87 KiB

View File

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

View File

@@ -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).

View File

@@ -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.
![profiler record](../../../../assets/angular-performance/34/profiler-record.png 'Profiler Record')
![profiler record](../../../../assets/performance/34/profiler-record.png 'Profiler Record')
## Statement

View File

@@ -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`.
![profiler record](../../../../assets/angular-performance/35/memoize-profiler.png 'Profiler Record')
![profiler record](../../../../assets/performance/35/memoize-profiler.png 'Profiler Record')
## Statement

View File

@@ -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.

View File

@@ -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

View File

@@ -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.
![profiler tab](../../../../assets/angular-performance/profiler-tab.png 'Profiler tab')
![profiler tab](../../../../assets/performance/profiler-tab.png 'Profiler tab')
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/"
/>