Mesurer les performances des applications Web JavaScript est un moyen important de donner à vos utilisateurs la vitesse à laquelle ils s'attendent. Nous allons discuter de quelques outils de développement Chrome qui peuvent nous aider à mesurer les performances de nos applications.
Aujourd'hui, JavaScript alimente de nombreux sites Web et applications Web sur le Web. Ces sites Web et applications devraient être extrêmement rapides si nous prévoyons de conserver nos utilisateurs. Mesurer avec précision les performances des applications Web est un aspect important pour rendre les applications Web plus rapides.
Dans cet article, nous aborderons quelques outils qui peuvent nous aider à mesurer les performances de nos applications. Ils comprennent:
- Panneau de performances de Chrome DevTools
- Phare
Conditions préalables
Une connaissance de base de Chrome DevTools vous aidera à tirer le meilleur parti de ce didacticiel.
Panneau de performances
Le panneau de performances de Chrome fournit: nous avec des outils pour nous aider à analyser la performance d'exécution de nos applications. Les performances d’exécution d’une application correspondent aux performances de l’application lorsqu’elle est exécutée.
Lorsqu’on analyse les performances d’une application, il est préférable de le faire en mode Incognito du navigateur. Ceci garantit que la mesure des performances ne soit pas affectée par d'autres facteurs tels que les extensions installées.
Pour accéder au panneau Performances, appuyez d'abord sur . Commande + Option + I sur Mac ou Control + Shift + I sur Windows et Linux, pour ouvrir DevTools. Une fois dans DevTools, cliquez sur l'onglet Performance :
Pour enregistrer les performances d'exécution d'une page de votre application, ouvrez le panneau Performances de cette page, sélectionnez les options souhaitées, cliquez sur l'enregistrement. DevTools capture les métriques de performance au fur et à mesure que la page s’exécute:
Le résultat de performances renvoyé contient des données sur Réseau Les cadres Les interactions Le fil principal et quelques autres. Chaque donnée est dans une section et une section agrandie vous montre les données associées.La partie Overview contient des captures d'écran et des informations sur d'autres sections, en haut du résultat (encadré en rouge ci-dessus) et au bas de celui-ci, un résumé . Onglet contenant la ventilation de toutes les activités.
La section Images contient les données de l'un des indicateurs les plus importants pour la mesure des performances d'animation dans votre application (le taux recommandé est de 60 images par seconde). et tout ce qui précède conduit à caca r performance. En survolant les barres vertes de la section Images, vous affichez la cadence de cette image. Toute image supérieure à 60 images par seconde signifie que vous devez optimiser les performances:
Le diagramme de flammes dans la section principale contient généralement beaucoup de données.Vous pouvez zoomer sur des événements individuels en cliquant, en maintenant et en faisant glisser votre souris sur la section de vue d'ensemble: [19659003] 
Dans la vue agrandie, nous pouvons voir un événement de souris et un Animation Frame Fired avec un triangle rouge. Le triangle rouge correspondant à un événement est un avertissement indiquant un problème de performances lié à cet événement.
En cliquant sur l'événement, l'onglet de résumé vous indique plus d'informations sur l'événement:
Lighthouse est un outil open source de Google permettant d’améliorer la qualité des pages Web. Il effectue une série d’audits sur une page et génère un rapport sur la performance de la page avec des suggestions comment améliorer la page.
Un phare alimente l’onglet Audits de Chrome, facilitant ainsi l’établissement d’un rapport sur les performances de votre page. Le phare a également une extension Chrome. Pour accéder à Lighthouse, ouvrez DevTools, puis cliquez sur l'onglet Audits :
Dans cet article, nous avons présenté les outils de développement que Chrome nous offre pour améliorer les performances d’une application JavaScript. J'espère que vous avez beaucoup appris pour vous aider à créer des applications JavaScript plus performantes.
Ce blog vous a été proposé par Kendo UI
Vous souhaitez en savoir plus sur la création d'applications Web exceptionnelles? Tout commence avec Kendo UI – la bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.
Source link