Tu recherches comment rendre ton application Angular plus rapide? Tu connais la propriété ChangeDetection des Component Angular? Cette propriété du décorateur permet de modifier la manière dont Angular analyse les données pour effectuer les mises à jour au niveau du component. Dans cet article, je te montre comment améliorer la vitesse de rendu de ton application Angular en modifiant les paramètres de détection de changement.
Ici je te présente une astuce qui accélère l’interprétation des changements et le traitement du DOM. Cela permet de gagner quelques millisecondes par-ci, quelques autres par-là… Bref c’est du « Final Custuming » on pourra dire.
Mais il est parfois utiles de savoir comment fonctionne la mécanique de détection de changement dans le framework Angular afin de tirer le meilleur parti du framework.
Je te montre donc dans cet article comment affecter rapidement et facilement la manière dont les components détectent le changement des valeur d’une propriété pour le refléter dans le DOM.
L’option ChangeDetection
L’option ChangeDetection permet d’effectuer la modification dont le component détecte les changements!
C’est cette propriété du décorateur @Component que l’on va changer les paramètre pour améliorer le processus de traitement des données.
Voici comment elle s’utilise:
@Component({
selector: 'app-item',
templateUrl: './item.component.html',
styleUrls: ['./item.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush // ici on change avec OnPush
})On remarque la propriété « changeDetection » qui est bindée à l’outil ChangeDetectionStrategy qui définit la stratégie de Détection « OnPush« .
Cette petite modification n’a l’air de rien et pourtant!!
J’ai faits une capture de mon écran pour te présenter les performances de cette option.. avant/après…
Les gains de performance sont vraiment significatifs!
Comparatif avec OnPush
J’ai comme d’habitude créé un petit projet que tu peux récupérer pour effectuer toi-même le test sur ton ordi. Je te donne à la fin de l’article le lien et je te montre ici les capture de mon écran lorsque j’ai faits le test.
Voici la capture du profil SANS la modification du ChangeDetection
On remarque que l’event est traité en 0.41ms (millisecondes), ce qui est tout a fait respectable mais on peut faire mieux!!
Et maintenant AVEC la modification du ChangeDetection sur onPush
Désormais le traitement de l’event se fait en 100us (microsecondes) ce qui est drastiquement plus rapide en performant qu’avec le réglage par défaut!
Lien du projet démo:
https://stackblitz.com/edit/angular-perf-change-detection
Conclusion
On remarque qu’Angular a par défaut un excellent résultat de performance, ceci malgré le fait que les tests ont été fait dans un environnement de développement, en production les tests devraient être encore plus rapides (env 2 x).
Angular nous met à disposition tous une série d’outils pour améliorer les performances dès nos applications. Après, libre à nous de les implémenter dans nos projets en fonction des besoins et ressources disponibles.
Il faut garder à l’esprit que ce type d’optimisation ne va pas changer radicalement l’utilisation de vos applications, mais l’utilisation de plusieurs techniques d’optimisation conjointement utilisés devrait drastiquement améliorer les performances des apps.
Je publierai prochainement d’autres articles sur l’optimisation des performance d’Angular, ce sujet semble plaire à beuacoup de monde vu les retours positif que j’ai reçu par email suite au précédents article qui traiten du même suget.
Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.
Demande ta version numérique gratuite de mon livre Javascript Array Methods
