Mesurer les performances avec l’API JavaScript Performance

Des mesures précises des performances constituent un élément important de la maintenance des applications, en particulier à mesure que nos applications évoluent. Nous examinerons deux des fonctions fournies dans l’API JavaScript Performance dans ce seul but.

À mesure que la complexité et la portée des applications Web continuent de croître, les performances et la capacité de les mesurer et de les analyser avec précision deviennent de plus en plus importantes. Dans cet article, nous étudierons l’API JavaScript Performance, un outil utile conçu pour nous fournir un ensemble de normes que nous pouvons utiliser pour mesurer les performances des applications Web.

L’API des performances

Le API de performances JavaScript fait partie de la suite Web Performance API, une suite d’outils qui offre aux développeurs une approche unifiée pour évaluer divers aspects des performances de leurs applications Web. Cela inclut des informations détaillées sur les temps de chargement des pages, les événements de chargement des ressources, les requêtes réseau et les temps d’exécution des scripts.

L’API est accessible via le performance objet disponible dans le contexte d’exécution global de JavaScript. Cet objet est la passerelle vers toutes les métriques liées aux performances.

const perfData = window.performance;

Le performance l’objet contient de nombreuses méthodes et propriétés conçu pour aider à collecter des données de performance précises. Dans cet article, nous concentrerons notre attention sur deux fonctions particulièrement utiles : performance.mark() et performance.measure().

performance.mark

Le performance.mark() La méthode est une fonction essentielle de l’API Performance, car elle nous permet de créer un horodatage dans le tampon de saisie des performances du navigateur. En termes plus simples, cela permet de marquer un moment précis lors de l’exécution de la page. Cette méthode est utilisée pour créer des marques nommées qui peuvent ensuite être référencées par le performance.measure() méthode (que nous verrons bientôt).

À titre d’exemple, considérons un scénario dans lequel nous avons un composant React dans notre application Web qui envoie une requête API à https://jsonplaceholder.typicode.com/todos lorsqu’un bouton est cliqué, et nous voulons mesurer le temps qu’il faut pour que la liste des données récupérées de l’API remplisse notre page.

import React, { useState } from "react";

export function App() {
  const [todos, setTodos] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const fetchTodos = () => {
    setIsLoading(true);
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((response) => response.json())
      .then((data) => {
        setTodos(data);
        setIsLoading(false);
      });
  };

  return (
    <div>
      <button onClick={fetchTodos}>Fetch Todos</button>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {todos.map((todo) => (
            <li key={todo.id}>{todo.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

Dans l’exemple de code ci-dessus, le composant conserve deux éléments d’état : todosqui stocke la liste des tâches à effectuer, et isLoading, qui indique si les données sont en cours de récupération. Lorsque l’utilisateur clique sur le bouton « Récupérer les tâches », un message de chargement s’affiche dans l’interface utilisateur avant qu’une liste de tâches ne s’affiche.

Notre objectif est de mesurer les performances des fonctionnalités que nous avons créées en mesurant le temps nécessaire à l’exécution de la requête API. et pour que les données récupérées soient rendues sur la page. Pour nous aider à y parvenir, nous utiliserons le performance.mark() méthode pour suivre deux moments spécifiques de l’exécution de notre code : lorsque la requête de récupération démarre et lorsque la requête se termine et que les données sont restituées.

Pour commencer, nous placerons un performance.mark() appeler au début du fetchTodos fonction pour marquer le début de l’opération de récupération.

import React, { useState } from "react";

export function App() {
  

  const fetchTodos = () => {
    
    performance.mark("startFetchTodos");

    setIsLoading(true);
    fetch("https://jsonplaceholder.typicode.com/todos")
      
  };

  return (
    
  );
}

Ajouter performance.mark("startFetchTodos") juste avant le lancement de la demande de récupération, permet de créer un horodatage nommé « startFetchTodos » dans le tampon d’entrée de performances.

Ensuite, nous placerons un deuxième performance.mark() appelez une fois que les données récupérées sont définies dans l’état et que le composant a fini de restituer les données. Pour y parvenir, on pourrait placer la marque juste après le setTodos(data) appel. Cependant, pour mesurer avec précision le temps nécessaire au navigateur pour afficher l’état mis à jour, nous souhaitons placer la marque de performance après les données récupérées sont peintes sur le navigateur. N’oubliez pas que les mises à jour d’état de React peuvent ne pas correspondre immédiatement aux mises à jour du DOM !

Pour nous assurer que nous marquons le moment après que les données sont littéralement rendues sur la page, nous utiliserons la fenêtre requêteAnimationFrame méthode. Cette méthode indique au navigateur que nous souhaitons effectuer une animation et demande au navigateur d’appeler une fonction spécifiée pour mettre à jour une animation avant la prochaine repeinture.

Autrement dit, requestAnimationFrame garantit que la marque de performance est ajoutée au moment précis après que le navigateur a terminé son processus de peinture, capturant le temps réel nécessaire à l’utilisateur pour voir le contenu mis à jour sur son écran.

import React, { useState } from "react";

export function App() {
  

  const fetchTodos = () => {
    performance.mark("startFetchTodos");
    setIsLoading(true);

    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((response) => response.json())
      .then((data) => {
        setTodos(data);
        setIsLoading(false);
        requestAnimationFrame(() => {
          
          performance.mark("endFetchTodos");
        });
      });
  };

  return (
    
  );
}

Avec ces deux labels de performance, startFetchTodos et endFetchTodos, nous disposons désormais de points de référence précis marquant le début et la fin de notre opération de récupération. Cette configuration nous permet de mesurer avec précision le temps total nécessaire à la requête API et au rendu des données récupérées sur la page.

performance.mesure

Le performance.measure() est une autre fonction clé de l’API Performance, utilisée pour calculer la durée entre deux notes de performance. Il crée une mesure nommée entre deux points spécifiés, nous permettant de comprendre combien de temps prend un processus particulier dans une application.

Dans notre exemple de liste de tâches, nous utiliserons performance.measure() pour calculer la durée entre le startFetchTodos et endFetchTodos Des marques. Cela nous donnera le temps total nécessaire pour que la requête API se termine et que les données récupérées soient affichées sur la page. Nous placerons la mesure des performances à la fin de notre requête de récupération à côté d’un console.log message pour enregistrer le temps nécessaire à l’ensemble du processus (en millisecondes).

import React, { useState } from "react";

export function App() {
  

  const fetchTodos = () => {
    performance.mark("startFetchTodos");
    setIsLoading(true);

    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((response) => response.json())
      .then((data) => {
        setTodos(data);
        setIsLoading(false);
        requestAnimationFrame(() => {
          performance.mark("endFetchTodos");

          
          const measure = performance.measure(
            "fetchAndRender",
            "startFetchTodos",
            "endFetchTodos"
          );
          console.log(`Total time for fetch and render: ${measure.duration}ms`);
        });
      });
  };

  return (
    
  );
}

Lorsque vous visitez le navigateur et cliquez sur le bouton « Récupérer toutes les tâches », nous remarquerons un journal de la console affichant le temps total pris pour l’ensemble du processus de récupération et de rendu des données !

Si nous utilisions une connexion plus lente, nous remarquerions une valeur plus élevée dans le journal de notre console de mesure des performances, reflétant le temps supplémentaire requis pour récupérer et restituer les données en raison de la vitesse réduite du réseau.

Voir l’exemple de code en cours d’exécution ci-dessus dans ce Lien CodeSandbox.

Conclure

L’API JavaScript Performance offre un cadre robuste permettant aux développeurs de mesurer et d’optimiser avec précision les performances de leurs applications Web. Même si notre attention a été portée sur performance.mark() et performance.measure() méthodes, l’API Performance englobe une gamme plus large de fonctionnalités. Ces outils peuvent suivre diverses mesures au-delà des simples temps de chargement, notamment l’utilisation de la mémoire, les fréquences d’images des animations, etc.

Des mesures précises des performances ne sont pas seulement bénéfiques pour une analyse et une optimisation immédiates ; ils peuvent également être enregistrés et suivis au fil du temps. Cette surveillance continue est importante dans un environnement Web en constante évolution où les nouvelles mises à jour et modifications peuvent avoir un impact sur les performances. En enregistrant régulièrement ces mesures, nous pouvons établir des références de performances, identifier les tendances et prendre des décisions basées sur les données pour améliorer l’expérience utilisateur.