Profilage des composants React avec l'API User Timing

Le profilage de vos composants React est peut-être la chose la plus importante à faire pour améliorer les performances. Apprenez à procéder ainsi à l'aide de l'API User Timing du navigateur.

Pour améliorer les performances de nos applications React, nous pouvons avant tout profiler et mesurer nos principaux composants et interactions. Ainsi, nous saurons si nos modifications ont un impact positif.

Auparavant, la méthode recommandée pour mesurer les performances de nos composants était d'utiliser le package react-addons-perf, mais la documentation officielle nous indique maintenant. l'API User Timing du navigateur à la place:

À compter de React 16, react-addons-perf n'est pas pris en charge. Utilisez les outils de profilage de votre navigateur pour obtenir des informations sur les composants à restituer.

Cette API nous permet de définir des horodatages haute résolution dans notre code pour mesurer ce que nous voulons. Les méthodes les plus importantes dans cette API sont les mesures et . Nous utiliserons la marque pour définir les horodatages de début et de fin et la mesure pour calculer le temps qui sépare les deux.

Ensuite, nous pouvons obtenir nos mesures en utilisant la méthode . getEntriesByType avec "mesure" comme type:

 window.performance.mark ('myMeasureStart');
// Le code que nous voulons mesurer va ici.
window.performance.mark ('myMeasureEnd');
window.performance.measure ('myMeasure', 'myMeasureStart', 'myMeasureEnd');
window.performance.getEntriesByType ('mesure');
// [{
//   duration: 0.10000000149011612
//   entryType: "measure"
//   name: "myMeasure"
//   startTime: 4264378.099999999
// }]

Maintenant que nous savons mesurer les performances d'un morceau de code, nous allons utiliser ces méthodes pour mesurer le temps nécessaire au rendu d'un composant relativement complexe StockChart à partir du framework Kendo UI , dans un petit exemple d'application :

Le composant que nous souhaitons mesurer ressemble à ceci:

 La ​​classe Chart étend React.Component {
  render () {
    revenir (
      
        {/ * ... * /}
      
    )
  }
} 

Si nous voulons connaître le temps nécessaire au montage du composant, nous allons définir la première marque dans la méthode de rendu et la seconde dans la méthode du cycle de vie composantDidMount :

 classe Chart s'étend React.Component {
  render () {
    window.performance.mark ('ChartMountStart');
    // ...
  }

  composantDidMount () {
    window.performance.mark ('ChartMountEnd');
  }
} 

De la même manière, nous pouvons définir des repères pour connaître le temps nécessaire à la mise à jour du composant. Cette fois, nous utiliserons la méthode de cycle de vie de ComponentDidUpdate à la place.

Pour éviter que les deux marques ne soient définies dans la méthode de rendu à chaque fois que le composant effectue un nouveau rendu, nous pouvons savoir si le composant a déjà été restitué. été monté avec une propriété d'instance que nous appellerons monté. Il commencera à définir la valeur false dans le constructeur de notre composant et nous le définirons sur true lorsque le composant sera monté. Nous l'utilisons ensuite pour définir les marques ChartUpdateStart ou ChartMountStart . Chart étend la classe React.Component {
  constructeur () {
    super();

    this.mounted = false;
  }

  render () {
     if (this.mounted) {
       window.performance.mark ('ChartUpdateStart');
     } autre {
       window.performance.mark ('ChartMountStart');
     }
     // …
   }

  composantDidMount () {
    this.mounted = true;
  }
}

Avec toutes les marques définies, nous pouvons appeler measure à l'intérieur de nos méthodes ComponentDidMount et ComponentDidUpdate pour connaître le temps passé à monter et à mettre à jour respectivement:

 Le graphique de la classe est étendu. React. Composant {
  // ...

  composantDidMount () {
    this.mounted = true;
    window.performance.mark ('ChartMountEnd');
    window.performance.measure ('ChartMount', 'ChartMountStart', 'ChartMountEnd');
  }

  composantDidUpdate () {
    window.performance.mark ('ChartUpdateEnd');
    window.performance.measure ('ChartUpdate', 'ChartUpdateStart', 'ChartUpdateEnd');
  }
} 

Une fois que tous les repères et mesures sont définis, nous pouvons appeler la méthode getEntriesByType pour obtenir les données sous forme de tableau d'objets.

Nous pourrions ensuite envoyer ces données à notre serveur, ainsi que nous l'agrégions et que nous montrions de beaux graphiques:

 const mesures = window.performance.getEntriesByType ('mesure');
fetch ('https://example.com/api/measures', {
  méthode: 'POST',
  en-têtes: {
    'Accepter': 'application / json',
    'Content-Type': 'application / json'
  },
  body: JSON.stringify (mesures)
})

Nous pourrions également simplement voir ces mesures dans les outils de développement de notre navigateur. Par exemple, dans Chrome, accédez à l'onglet Performance appuyez sur le bouton pour démarrer l'enregistrement, effectuez certaines actions dans notre application et arrêtez l'enregistrement. Nous verrions alors nos mesures dans la section User Timing :

classe MeasureRender act.Component {   constructeur () {     super();     this.mounted = false;   }   render () {     const {name} = this.props;     if (this.mounted) {       window.performance.mark (`$ {name} UpdateStart`);     } autre {       window.performance.mark (`$ {name} MountStart`);     }     retournez this.props.children;   }   composantDidMount () {     const {name} = this.props;     this.mounted = true;     window.performance.mark (`$ {name} MountEnd`);     window.performance.measure (`$ {name} Mount`,` $ {name} MountStart`, `$ {name} MountEnd`);   }   composantDidUpdate () {     const {name} = this.props;     window.performance.mark (`$ {name} UpdateEnd`);     window.performance.measure (`$ {name} Update`,` $ {name} UpdateStart`, `$ {name} UpdateEnd`);   } }

Ensuite, nous encapsulons le composant que nous voulons mesurer avec MeasureRender :

 Le graphique de la classe étend React.Component {,
  render () {
    revenir (
      
        
           {/ * ... * /}
        
      
    );
  }
}

La classe App étend React.Component {
  render () {
    revenir (
      
        
        
      
    );
  }
} 

J'espère que cela vous aidera à avoir une meilleure idée des goulots d'étranglement dans votre application et des endroits où vous devriez passer votre temps à améliorer les choses.

Vous souhaitez en savoir plus sur React? Consultez notre page Toutes les choses réagissent qui contient un large éventail d’informations et de pointeurs d’informations relatives à la réaction – de sujets brûlants et d’informations actualisées à la mise en route et à la création d’une interface utilisateur convaincante.