Mesurer et contrôler le rendu final

Une liste courte peut donner l’impression que le rendu est instantané, même si chaque mise à jour déclenche beaucoup d’opérations. Lorsque la liste grandit, ces coûts peuvent s’accumuler et rendre l’interface moins réactive. Vous allez définir un scénario reproductible pour mesurer le rendu, comparer les résultats et vérifier que l’optimisation conserve le comportement attendu.

Les leçons précédentes ont déjà regroupé la construction des éléments de liste et mémorisé les statistiques tant que la liste ne change pas. Ici, vous ne réintroduisez pas ces notions : vous mesurez leur effet sur le projet intégré et vous contrôlez que la progression, les libellés et les actions restent corrects.

Préparer une comparaison équitable

Une mesure utile compare la même opération, sur les mêmes données, dans le même navigateur. Préparez une liste représentative, par exemple plusieurs centaines de tâches avec un mélange de tâches terminées et en attente. Gardez le même état avant chaque essai et déclenchez le même type de mise à jour ; sinon, vous comparez des scénarios différents plutôt que deux stratégies de rendu.

Dans les outils de développement, ouvrez l’onglet Performance, démarrez un enregistrement, déclenchez une mise à jour de la liste, puis arrêtez l’enregistrement. Repérez le travail JavaScript et les opérations de rendu associées à cette interaction. Répétez plusieurs fois chaque scénario et comparez des durées médianes : une mesure isolée peut varier à cause des tâches concurrentes du navigateur.

Chronométrer une opération ciblée

Pour obtenir une durée lisible autour d’une opération que vous pouvez déjà déclencher dans l’application, utilisez un chronomètre fondé sur l’horloge monotone du navigateur. La fonction suivante ne touche pas au DOM et peut être exécutée dans la console des outils de développement. Vous lui fournissez une fonction qui effectue une mise à jour représentative, par exemple l’action de test que vous utilisez déjà pour déclencher le rendu.

function mesurerOperation(nom, operation) {
  const debut = performance.now();
  operation();
  const duree = performance.now() - debut;
  console.log(`${nom} : ${duree.toFixed(2)} ms`);
  return duree;
}

// Appelez cette fonction avec la même opération pour chaque essai.
// Exemple : mesurerOperation("mise à jour", declencherMiseAJour);

La console affiche la durée de l’opération en millisecondes, par exemple : « mise à jour : 4.82 ms ». La valeur dépend de l’appareil, du navigateur et de l’état de la page.

Cette durée couvre uniquement le temps synchrone passé dans la fonction appelée. Elle ne représente pas nécessairement le moment où le navigateur a terminé la mise en page et l’affichage des pixels. Utilisez donc cette mesure pour comparer une même opération JavaScript entre deux versions, puis confirmez l’effet visuel et les tâches de rendu dans l’onglet Performance.

Contrôler le résultat, pas seulement la durée

Une mise à jour plus rapide n’est une amélioration que si elle produit la même interface. Après chaque essai, vérifiez que le nombre d’éléments affichés correspond au nombre de tâches, que les cases à cocher reflètent leur état et que les actions de suppression et de terminaison restent utilisables. Contrôlez aussi la progression, notamment lorsque la liste est vide et lorsqu’aucune tâche n’est terminée.

Répétez le scénario après rechargement pour inclure la restauration des tâches, sans mélanger cette durée avec celle du rendu ciblé. Pour une comparaison avant/après, conservez les mêmes données représentatives, réalisez plusieurs essais de chaque côté et notez la médiane ainsi que les anomalies visuelles ou fonctionnelles. Si le gain n’est pas reproductible ou si une interaction ne fonctionne plus, ne retenez pas la modification sur la seule base d’un chiffre favorable.

À retenir

• Comparez une opération identique avec les mêmes données et le même environnement.
• Répétez les mesures et privilégiez la médiane plutôt qu’un résultat isolé.
• Distinguez le temps JavaScript de la mise en page et de l’affichage observés dans Performance.
• Vérifiez la progression, les éléments de liste et les interactions après chaque optimisation.
• Rejouez le scénario après rechargement pour contrôler la restauration sans la confondre avec le coût du rendu.