L'essentiel de React.js

Mesurer les performances de React.js

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour traquer les performances de React, des outils existent et sont déjà implémentés dans la librairie. Apprenez à tracer l'exécution de votre code.
03:23

Transcription

Les performances de React! On en a parlé au début de ce cours et c'est vrai que React est très performant. Mais pas plus rapide que d'autres framework... quand on sait bien tous les utiliser on a presque les mêmes performances. Il est inutile de faire du troll sur React ou sur Angular. Il y a plein de librairies que vous pourrez utilisez à votre guise. Il est inutile d'aimer l'un ou l'autre, si on a ses préférences. Cela dit il y a des outils de performances qui vous permettront dans votre code... de tester la performance de votre projet et de trouver ce qui pose problème. Sachez que pour tester la performance... vous devrez utiliser la build de production minifiée. Qu'est-ce que c'est? Il s'agit du fichier minifié de React, react.min.js. Pensez à le faire, sinon ça risque de fausser les tests. On a ensuite une API sur ce plug-in... qui permet de démarrer avec Perf.start et s'arrêter avec Perf.stop. Ce qui se passe quand on l'implémente c'est qu'on aura... les différentes itérations dans notre code et l'historique. Quels sont les rendus et les ajouts? Faites-le au début de votre appli, vous la testez dans le navigateur et faites un perf.stop à la fin. Vous aurez une grille qui vous explira les problèmes rencontrés ou pas. On peut aussi mesurer les inclusions et les exclusions. Ces derniers sont les éléments disparus avec WillMount, DidMount et InitialState. Là ce sont des choses importantes de votre appli. Vous pouvez donc faire assez de choses. On peut aussi faire des printWasted. Le wasted time est ce qui se passe quand on a des rendus... sur d'autres choses que le composant. Par exemple le DOM n'est pas touché, mais on a des rendus à l'intérieur... des modifications de state, ça va vous permettre de les tester. On peut aussi faire des print d'opérations. C'est quand il y aura des insertions et des manipulations dans le DOM. C'est aussi bien car on aura des informations dessus. Enfin on peut mesurer le DOM. On peut donc voir toutes les opérations et avec printDOM vous avez tout ce qui se passe dans le DOM. N'hésitez pas à l'utiliser, car ça vous permettra de voir l'état de votre code... et vous avez à chaque fois les milisecondes d'exécution pour tout. C'est un outil intéressant que vous pouvez utiliser facilement... très utile pour le test de performance d'une appli une fois développée. Alors, n'hésitez vraiment pas à l'utiliser. Il faut savoir où vous en êtes, il y aura peut-être des itérations, et autres... choses que vous pouvez bloquer. N'oubliez pas qu'on peut aussi bloquer le rendu de certains composants... inutiles à certains endroits. Quand on a un rendu avec des éléments, ça rafraîchit absolument tout. Pensez-y c'est aussi important. Cet outil vous permet d'aller un peu plus loin dans le fonctionnement de l'appli... et de savoir quels sont les goulottes d'étranglement et... où vous avez le plus de milisecondes de rendu et combien d'instances.

L'essentiel de React.js

Exploitez pleinement React.js ! Créez des composants web complexes rapidement, découvrez leurs relations ainsi que leurs cycles de vie, passez en revue la navigation, etc.

3h28 (49 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
React.js React.js 15.3.2
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :27 oct. 2016
Durée :3h28 (49 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !